Question

我花了几个小时才找到解决这个问题的方法，但找不到任何类似的问题。

结果应该是材料与颜色相关联。我想以ng-option的值显示材料和颜色以及颜色ID。

查看：

<div class="row clearfix">
    <div class="col-md-8">
        <md-input-container class="md-block">
            <label>material</label>
            <md-select name="material" ng-model="secondStep.material">
                <md-optgroup label="material">
                    <md-option ng-value="materialsObjs.id" ng-repeat="materialsObjs in materialsObj track by $index">{{materialsObjs.name}}</md-option>
                </md-optgroup>
            </md-select>
        </md-input-container>
    </div>
</div>
<div class="row clearfix">
    <div class="col-md-8">
        <md-input-container class="md-block">
            <label>colors</label>
            <md-select name="colors" ng-model="secondStep.colors">
                <md-optgroup label="colors">
                    <md-option ng-value="{{key}}" ng-repeat="(key , value) in colorsObj">{{value}}</md-option>
                </md-optgroup>
            </md-select>
        </md-input-container>
    </div>
</div>

JSON：

{
    "status": "ok",
    "printer_id": 113,
    "materials": [{
        "id": 1,
        "name": "drewno",
        "color": [{
            "1": "green"
        }]
    }, {
        "id": 2,
        "name": "pla",
        "color": [{
            "3": "yellow"
        }]
    }]
}

控制器：

if(respondeObj.status == 'ok') {    
    $scope.materialsObj = respondeObj.materials;
    $scope.colorsObj = [];
    angular.forEach(respondeObj.materials, function(value , key) {
        var putish = value.color[0];
        this.push(putish);
    }, $scope.colorsObj);
}

我无法获得列表和颜色ID的分隔颜色值作为选择器值传递。

目前的结果显示在图片中：Image

Answer 1

Here is a working solution 根据我的评论。

编辑 - 我忘记了ng-optons属性，它允许您将对象用作选项的选定值。通过更改您的第一个选择以使用ng-options，您需要添加的是 keysFilter ，并使用我HTML部分中第二个下拉列表的代码从material.color
获取键/值

HTML

<select ng-model="currentMaterial"
          ng-options="material as material.name for material in materialsObj"></select>
<select ng-if="currentMaterial">
  <option ng-repeat="color in currentMaterial.color" value="{{id}}" ng-init="id = (color | keysFilter)">{{color[id]}}</option>
</select>

AngularJS控制器

var app = angular.module("myApp", [])
.filter("keysFilter", function () {
  return (function (item){
    if (!item) {
      return [];
    }
    var keys = Object.keys(item);
    return keys[0];
  });
})
.controller("myCtrl", function ($scope){
  $scope.currentMaterial = {};
  $scope.materialsObj = [
    {
      "id": 1,
      "name": "drewno",
      "color": [
        {
          "1": "green"
        },
        {
          "2": "yellow"
        }
      ]
    }, 
    {
      "id": 2,
      "name": "pla",
      "color": [
        {
          "3": "yellow"
        },
        {
          "4": "purple"
        },
        {
          "5": "brown"
        }
      ]
    }
  ];
});

Answer 2

如果我理解正确您的问题是因为在构建 $ scope.colorsObj 数组之后，您将在其中包含对象：

$scope.colorsObj  = [
    {"1": "green"},
    {"3": "yellow"}
];

然后您需要另外 ng-repeat 来实现您想要的目标，例如：

<div ng-repeat="obj in colorsObj">
    <div ng-repeat="(key, value) in obj">
        {{key}} : {{value}}
    </div>
</div>

如果有帮助，请告诉我。谢谢！

Angular 1.5嵌套ng-repeat关系json

2 个答案:

HTML

AngularJS控制器