Javascript 将对象数组绑定到AngularJs中SELECT的选项值

我有一个对象的散列，这个散列的ID绑定到一个单选按钮。当用户选择此收音机时，我需要使用基于此模型属性的选项填充select标记。 很难解释，所以我创建了一个代码笔来显示我想要的：

提前谢谢

我稍微重写了一下你的HTML——没有使用ul/li标记，因为div或span就足够了。使它更容易

基本上，在ng repeat中，您可以执行以下操作：

<div ng-repeat="attr in data">
      <input type='radio' name='data-attr' value='{{attr.id}}' />{{attr.name}}   
      <select ng-model="selected" ng-options="item.name for item in attr.values "></select>
</div>

{{attr.name}

---

正是ng选项使这项功能得以实现。我还向模型绑定添加了一个$scope.selected变量，但我没有对它做任何处理。根据需要使用

我发明了一把小提琴，可以解决你的问题

将数据分离到服务

animateAppModule.service（'data'，function（）{…}）

将模型指定给“选择”框

ng model=“$scope.selectedOption”

这里是一个动态绑定到单个SELECT元素的绑定，在选择更改时使用一个工作ng模型绑定：

HTML:

---

你为什么对我大喊大叫：‘（嗨，詹姆斯，差不多是这样……但我不希望每种类型都有一个选择。它将只有一个选择，并将根据单选值填充……明白了吗？$watch docs在范围页面下：

<div ng-controller="TestCtrl">
  <ul>
    <li ng-repeat="attr in data">
      <input type="radio" name='data-attr' value='{{attr.id}}' ng-model="selected.id" />{{attr.name}}
    </li>
  </ul>

  <select ng-model="selected.value" ng-options="item.name for item in selectedAttr.values "></select>
</div>

function TestCtrl($scope) {
  $scope.selected = {};

  $scope.data =  [
    {"id":"113000",
      "name":"Size",
      "values":
          [{"id":"92029","name":"Size A"},
           {"id":"92030","name":"Size B"}]
    },
    {"id":"113002",
      "name":"Color",
      "values":
          [{"id":"94029","name":"Blue"},
           {"id":"94030","name":"Black"}]
    }
  ];

  $scope.$watch('selected.id', function(id){
    delete $scope.selected.value;
    angular.forEach($scope.data, function(attr){
      if(attr.id === id){
        $scope.selectedAttr = attr;
      }
    });
  });
}