Angular 选择的默认值不适用于对象
Angular Chosen default not working with object
我正在使用 https://github.com/localytics/angular-chosen 以允许 select 标签具有许多选项的搜索功能。
我遇到的问题是在已保存的供应商对象上预select选项。现在创建新供应商时出现问题,但如果我们正在查看现有供应商,我想在 select 框中显示供应商名称,而不是占位符。
<select chosen
ng-model="myVendor"
ng-options="vendor['public-id'] as vendor.name for vendor in vendors"
data-placeholder="Nah">
</select>
在我的控制器中,我手动设置模型 $scope.myVendor = "Some value"
问题是我用对象而不是 key/value 填充选项。我发现它的 example 与 key/value 一起工作,但没有成功将其作为选项适应对象。
我什至尝试将 myVendor
设置为我想要 select 的匹配对象,但没有成功。
我更新了 plunker 并更改了我之前对插件所做的更改。这不是问题。我不明白它是如何给我错误的。
解决方案是用一个对象和两个函数跟踪id和名称:
// 控制器
$scope.vendors = [
{
"public-id": "1234",
"name": "stugg"
},
{
"public-id": "4321",
"name": "pugg"
}
];
$scope.myVendor = {name: "pugg", id:""};
$scope.updateMyVendorName = function () {
var found = false,
i = 0;
while (!found && i < $scope.vendors.length) {
found = $scope.vendors[i]['public-id'] === $scope.myVendor.id;
if (found) {
$scope.myVendor.name = $scope.vendors[i].name;
}
i++;
}
}
findVendorByName();
function findVendorByName () {
var found = false,
i = 0;
while (!found && i < $scope.vendors.length) {
found = $scope.vendors[i]['name'] === $scope.myVendor.name;
if (found) {
$scope.myVendor.id = $scope.vendors[i]['public-id'];
}
i++;
}
}
// 模板
<select chosen class="form-control span6" ng-options="vendor['public-id'] as vendor.name for vendor in vendors" ng-model="myVendor.id" ng-change="updateMyVendorName()">
{{myVendor.name}}
我正在使用 https://github.com/localytics/angular-chosen 以允许 select 标签具有许多选项的搜索功能。
我遇到的问题是在已保存的供应商对象上预select选项。现在创建新供应商时出现问题,但如果我们正在查看现有供应商,我想在 select 框中显示供应商名称,而不是占位符。
<select chosen
ng-model="myVendor"
ng-options="vendor['public-id'] as vendor.name for vendor in vendors"
data-placeholder="Nah">
</select>
在我的控制器中,我手动设置模型 $scope.myVendor = "Some value"
问题是我用对象而不是 key/value 填充选项。我发现它的 example 与 key/value 一起工作,但没有成功将其作为选项适应对象。
我什至尝试将 myVendor
设置为我想要 select 的匹配对象,但没有成功。
我更新了 plunker 并更改了我之前对插件所做的更改。这不是问题。我不明白它是如何给我错误的。 解决方案是用一个对象和两个函数跟踪id和名称:
// 控制器
$scope.vendors = [
{
"public-id": "1234",
"name": "stugg"
},
{
"public-id": "4321",
"name": "pugg"
}
];
$scope.myVendor = {name: "pugg", id:""};
$scope.updateMyVendorName = function () {
var found = false,
i = 0;
while (!found && i < $scope.vendors.length) {
found = $scope.vendors[i]['public-id'] === $scope.myVendor.id;
if (found) {
$scope.myVendor.name = $scope.vendors[i].name;
}
i++;
}
}
findVendorByName();
function findVendorByName () {
var found = false,
i = 0;
while (!found && i < $scope.vendors.length) {
found = $scope.vendors[i]['name'] === $scope.myVendor.name;
if (found) {
$scope.myVendor.id = $scope.vendors[i]['public-id'];
}
i++;
}
}
// 模板
<select chosen class="form-control span6" ng-options="vendor['public-id'] as vendor.name for vendor in vendors" ng-model="myVendor.id" ng-change="updateMyVendorName()">
{{myVendor.name}}