如何在Angular选择菜单中基于数据绑定而不是索引设置默认值

Question

我想根据值而不是索引位置来设置选择菜单中的默认项。例如，在下面的示例中，如果表单中的一个单选按钮显示"Oranges"，并且用户选择了该单选按钮，那么是否可以将后续选择菜单中的默认选择也设为Oranges？理想情况下，我不希望依赖于选择菜单中的项目顺序。

<input type="radio" ng-model="selectionList.message" value="{{selection.type}}">
<!--Default selection below should be based on value selected above, regardless of order-->
<select ng-model="editProject.project" ng-options="opt as opt.type for opt in editProject.options">
</select>

有没有一种方法可以根据值而不是项目在选择菜单中的位置来设置默认值？

Answer 1

不完全确定ui应该是什么样子，也不完全确定从中提取的数据结构是什么样子。但在ng更改中，看起来您使用的值与您试图操作的dataStructure无关。即使用数组值返回对象中的嵌套值。看看下面的方法是否适用于这种情况。我还做了一个plnkr.co，展示了它的一个例子。但以下是

<input type="radio" ng-model="color" 
       value="{{radioColors.type[1]}}"   
       ng-change="match()">Orange<br>

//选择元件

  <select ng-model="selectValue" 
          ng-options="selectColor as selectColor.type for selectColor in selectColors"></select>

//这会进入你的控制器

$scope.match = function () {
    angular.forEach($scope.selectColors, function(value, key) {
      if(angular.equals(value.type, $scope.color)) {
        $scope.selectValue = $scope.selectColors[key]
      }
    });
}

Answer 2

每个无线电输入文档，您可以添加一个ng-change挂钩

<input type="radio"
   ng-model=""
   value=""
   [name=""]
   [ng-change=""]
   ng-value="">

如ng-change="editProject.project = selection.type"