別のngリピートに基づく角膜リピート

ng-repeatからデータが供給されていますが、選択肢の各オプションには独自のデータがあります。<select>があります。単純に十分な、ここで私が働いているJSONペイロードである：別のngリピートに基づく角膜リピート

{ 
    "0":{ 
     "name":"Mover", 
     "scalar":[ 
      { 
       "name":"Size", 
       "unit":"m" 
      }, 
      { 
       "name":"Speed", 
       "unit":"m/s" 
      } 
     ] 
    }, 
    "1":{ 
     "name":"Stationary", 
     "scalar":[ 
      { 
       "name":"Size", 
       "unit":"m" 
      } 
     ] 
    }, 
    "2":{ 
     "name":"Vibrator", 
     "scalar": [ 
      { 
       "name":"Frequency", 
       "unit":"hz" 
      } 
     ] 
    } 
}

私が選択して、外3名が必要ですが、私は「スカラー」の値は、選択の隣にあるチェックボックスとして表示したいと思います。明らかにダイナミックでなければならないので、選択のng-repeatに基づいてこれを行う方法があれば私は興味がありました。私が求めているもう一つの理由は、書式設定のために、ng-repeatの外にチェックボックスを配置したいからです（これは選択されているからです）ので、チェックボックスがどのように繰り返し値にアクセスするかはあまりよく分かりません。以下はhtml抜粋です。これが可能であれば

<div id="type-selection" 
    class="row ng-hide" 
    ng-show="rcw.page ==='Type Selection'"> 
    <div class="col-md-6"> 
    <div class="form-group"> 
     <label for="rule-type">Type</label> 
     <select id="rule-type" 
      class="form-control" 
      ng-model="rcw.selectedRuleType"> 
     <option ng-repeat="type in rcw.QueryTypes">{{type.name}}</option> 
     </select> 
    </div> 
    </div> 
    <div class="col-md-2" ng-repeat="ideally scalar in type from above^"> 
    <label> 
     <input type="checkbox" 
      class="faChkSqr" 
      ng-model="ideally this would be dynamically tied to scalar.name </input> 
     <span></span> 
     <b>{{ideally this would be scalar.name}}</b> 
    </label> 
    </div> 
</div>

あまりにもわからないが、または私はJavaScriptでそこから、選択しているもの処理する必要がある場合に表示される必要があるかを決めますか？前もって感謝します！ rcw.selectedRuleType

<select id="rule-type" class="form-control" ng-model="rcw.selectedRuleType"> 
    <option ng-repeat="type in rcw.QueryTypes">{{type.name}}</option> 
</select>

私はあなたは自分のNG-の繰り返しでこのオブジェクトをループに持って推測：

<div class="col-md-2" ng-repeat="scalar in rcw.selectedRuleType"> 
    {{scalar.name}} 
</div>

側として

出典

2017-01-18 erp

plnkrやフィドルを追加します。 –

'ng-repeat'はあなたのデータだけを削除し、テンプレートをインスタンス化します。あなたの選択の中で変更を探すことはありません。チェックボックスを更新する 'ng-model'を選択に追加します – Weedoze

ng-repeatの選択で選択された' option'がチェックボックスのオプションを設定するはずですか？ – Yathi

あなたは変数に選択を格納していますあなたの選択にng-optionsを使用することをお勧めします。

<select ng-model="rcw.selectedRuleType" 
     ng-options="type as type.name in rcw.QueryTypes"> 
</select>

出典

2017-01-18 14:26:48 Mistalis

このようにしてください。

<li ng-repeat="n in items">{{n.name}}{{n.scalar}}  
     <select ng-model="selectme" ng-options="options.name for options in n.scalar"> 
     <option value="">-- choose color --</option> 
    </select>{{selectme}} 
     </li>

出典

2017-01-18 14:42:39

我々は、動的scaler.nameに基づくモデルをバインドする方法を確認してください選択に基づいてチェックボックスを作成し、しかし、することはできません。

選択したオプションのスケーラとして値を設定する必要があります。選択フィールドでイベントを変更するのを聞きます。&選択した値からスカラー値を抽出します。

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.QueryTypes = [{ 
 
     "name":"Mover", 
 
     "scalar":[ 
 
      { 
 
       "name":"Size", 
 
       "unit":"m" 
 
      }, 
 
      { 
 
       "name":"Speed", 
 
       "unit":"m/s" 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     "name":"Stationary", 
 
     "scalar":[ 
 
      { 
 
       "name":"Size", 
 
       "unit":"m" 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     "name":"Vibrator", 
 
     "scalar": [ 
 
      { 
 
       "name":"Frequency", 
 
       "unit":"hz" 
 
      } 
 
     ] 
 
    } 
 
]; 
 
$scope.getScalarTypes=function(){ 
 
$scope.scalarTypes=JSON.parse($scope.selectedRuleType); 
 
} 
 

 

 

 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 
<div id="type-selection"> 
 
    <div class="col-md-6"> 
 
    <div class="form-group"> 
 
     <label for="rule-type">Type</label> 
 
     <select id="rule-type" 
 
      class="form-control" 
 
      ng-model="selectedRuleType" ng-change="getScalarTypes()"> 
 
     <option ng-repeat="type in QueryTypes" value="{{type.scalar}}">{{type.name}}</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-2" ng-repeat="scalar in scalarTypes"> 
 
    <label> 
 
     <input type="checkbox" 
 
      class="faChkSqr"</input> 
 
     <span></span> 
 
     <b>{{scalar.name}}</b> 
 
    </label> 
 
    </div> 
 
</div> 
 
</div> 
 
</body> 
 
</html>

出典

2017-01-18 15:09:33

別のngリピートに基づく角膜リピート

答えて

関連する問題