2017-09-01 97 views
1

我尝试更新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视图中访问指令中的控制器对象。因为它已经在常量数组中显示对象的值。这就是为什么我没有在指令的模型属性中放置任何东西。如何连接两个对象数组,并将所选值映射到控制器(和名称)中对象的值?
任何帮助将不胜感激。

回答

1

使用隔离范围双向数据绑定“=”运算符共享选项数组的数据。为此,只需使用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" 
    } 
    ]; 
}); 

Working plunker

+0

谢谢!这解决了我的问题! – Julsy

+0

@Julsy很高兴帮助:) – Shantanu

相关问题