Question

我有一个对象哈希，这个哈希的ID绑定到RADIO BUTTON。当用户选择此收音机时，我需要使用基于此模型属性的选项填充选择标签。很难解释，所以我创建了一个Codepen来展示我想要的东西： http://codepen.io/rizidoro/pen/BeJjf

提前致谢！

Answer 1

这是一个动态绑定到单个SELECT元素的codepen demo绑定，在选择更改时绑定了一个工作的ng-model：

HTML：

<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>

JS：

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;
      }
    });
  });
}

Answer 2

我创造了一个小提琴，可以解决你的问题。 http://jsfiddle.net/qY2Zz/

将数据分离到服务中。

animateAppModule.service('data', function(){...})
将模型分配给选择框。

ng-model="$scope.selectedOption"

Answer 3

http://jsfiddle.net/wagedomain/afuz5/

我稍微改写了你的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>

这是使这项工作的ng选项。我还添加了一个$ scope.selected变量来模型绑定到但是我没有在小提琴中做任何事情。根据需要使用。

将OBJECT ARRAY绑定到AngularJs中SELECT的OPTIONS VALUES

3 个答案: