如何将ng选项中的选定选项值绑定到控制器中的对象值?
问题描述:
我尝试更新ng选项中选项的当前选定值时遇到一些麻烦。
我有一个包含一个对象的数组。该对象具有值“恒定”的“值”和“名称”属性。
我正在使用select和ng-options的自定义指令中使用此常量数组。这是该指令的html的一部分:如何将ng选项中的选定选项值绑定到控制器中的对象值?
<select
name="{{vm.name}}"
ng-model="vm.model"
ng-options="arrayObject.value as arrayObject.name for arrayObject in
vm.constantArrayofObject">
</select>
而且我以视图的形式使用此指令。
<directive
model=""
form="someForm"
name="someName">
</directive>
在控制器的视图我有一个对象“controllerObject”,其具有对象数组作为属性,例如:
controllerObject.properties: [
{
value: "someValue",
name: "someName"
}
]
我必须的值和所选择的名称绑定选项指定controllerObject.properties数组中的对象的值和名称,并将它们传递给update()函数。但我不知道如何在html视图中访问指令中的控制器对象。因为它已经在常量数组中显示对象的值。这就是为什么我没有在指令的模型属性中放置任何东西。如何连接两个对象数组,并将所选值映射到控制器(和名称)中对象的值?
任何帮助将不胜感激。
答
使用隔离范围双向数据绑定“=”运算符共享选项数组的数据。为此,只需使用controllerObject.properties数组获得一个更多属性选择选项。然后把它放在指令的范围块内。所以指令要使用可以是:
<mydirective field="fielddata" select-options="controllerObject.properties"></mydirective>
DDO:
app.directive('mydirective', function() {
return {
restrict: 'E',
templateUrl: 'dirtemplate.html',
scope: {
field: "=",
selectOptions: "="
},
link: function(scope, element, attrs) {
}
};
});
其中dirtemplate.html是:
<select
name="{{field.name}}"
ng-model="field.model"
ng-options="arrayObject.value as arrayObject.name for arrayObject in selectOptions">
</select>
而且在观点控制器定义fielddata & controllerObject为:
app.controller('MainCtrl', function($scope) {
$scope.fielddata = {
name: "country",
form: "someForm",
model: ""
};
$scope.controllerObject = {};
$scope.controllerObject.properties = [
{
value: "someValue",
name: "someName"
},
{
value: "Value1",
name: "Name1"
},
{
value: "Value2",
name: "Name2"
}
];
});
谢谢!这解决了我的问题! – Julsy
@Julsy很高兴帮助:) – Shantanu