Question

我的应用程序中有一个<select>，它是ng-repeat提供的数据，但是select中的每个选项都有自己的数据。简而言之，这是我正在使用的JSON有效负载：

{
    "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个名字，但我喜欢标量＆＃39;值显示为select旁边的复选框。它显然必须是动态的，所以我很好奇是否有一种方法可以根据选择的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中确定需要显示的内容？提前谢谢！

Answer 1

您将选择内容存储在变量中：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-repeat循环遍历这个对象：

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

作为旁注，我建议您在选择中使用ng-options：

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

Answer 2

试试这样。

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

Answer 3

我们可以根据选择创建复选框，但不确定如何基于scaler.name动态绑定模型。

我们需要将选项的值设置为所选选项的缩放器。然后我们应该在选择字段＆amp;上听取更改事件。从所选值中提取标量值。

＆＃13;

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

＆＃13;

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

＆＃13;

基于另一个ng-重复的角度ng-重复

3 个答案: