javascript - オブジェクト配列をAngularJsのSELECTのオプション値にバインドする

Question

オブジェクトのハッシュがあり、このハッシュのIDはラジオボタンにバインドされています。ユーザーがこのラジオを選択するとき、このモデルの属性に基づいたオプションを選択タグに入力する必要があります。説明するのが難しいので、私は自分が欲しいものを示すためにCodepenを作成しました：http： //codepen.io/rizidoro/pen/BeJjf

前もって感謝します！

Answer 1

これは、単一のSELECT要素に動的にバインドするcodepenデモであり、選択の変更時に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/。

1. データをサービスに分離しました。

   animateAppModule.service('data', function(){...})

2. 選択ボックスにモデルを割り当てました。

   ng-model="$scope.selectedOption"

Answer 3

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

HTMLを少し書き直しました。divまたはspanで十分な場合はul/liタグを使用しません。簡単になります。

基本的に、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-optionsです。モデルバインドに$scope.selected変数も追加しましたが、フィドルでは何もしていません。必要に応じて使用してください。