如何将 ng-options 中的选定选项值绑定到控制器中的对象值？

Question

我在尝试更新 ng-options 中选项的当前 selected 值时遇到了一些麻烦。
我有一个包含一个对象的数组。该对象具有 'value' 和 'name' 属性，其值是常量。
我在带有 select 和 ng-options 的自定义指令中使用这个常量数组。这是指令的一部分 html:

<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"
   }
]

我必须将 selected 选项的值和名称绑定到 controllerObject.properties 数组中对象的值和名称，并将它们传递给 update() 函数。但是我不确定如何访问 html 视图中指令中的控制器对象。因为它已经在常量数组中显示了对象的值。这就是为什么我没有在指令的模型属性中放置任何内容。如何连接两个对象数组并将 selected 值映射到控制器中对象的值（和名称）？
任何帮助将不胜感激。

Answer 1

使用隔离作用域两种方式数据绑定“=”运算符共享选项数组的数据。为此，只需再添加一个属性 select-options 和 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

如何将 ng-options 中的选定选项值绑定到控制器中的对象值？

How to bind selected option value in ng-options to a value of object in the controller?

javascript

angularjs

arrays

angularjs-directive

ng-options