Javascript 在嵌套的“选择”下拉列表中无法使ngOptions正常工作

我已经创建了一个angular应用程序，它记录正在创建的产品的属性。在页面中，我有两个选择下拉列表，第一个用于选择属性的键，第二个用于选择特定值。每个属性的json数据如下所示：-

{
  meta_key :"Weight",
  meta_values :[
  "10","20","30","40","50"
  ],
  type : "text",
  unit:"kgs" 
}

每个产品都可以有一个属性数组，唯一的区别是产品中的每个属性都有一个值作为meta_值，而不是将meta_值作为数组。JSON表示如下所示：-

{
  attributes : [
    {
      meta_key : "Weight",
      meta_value : "20",
      unit : "kgs"
    },
    {
      meta_key : "Volume",
      meta_value : "200",
      unit : "cm*cm*cm"
    }
  ]
}

这就是页面的外观

我担心的是，无论我在尝试什么，完全依赖于第一个select下拉列表的值的第二个select的值都不会被填充

空的第二个下拉列表

我尝试用静态数据填充第二个下拉列表，效果很好。但当数据取决于第一个下拉列表的选择时，数据不会改变。这是我的控制器

    $scope.attributes = [];

    $scope.product = {
        attributes: []
    };
    $scope.current_user = {};

    var attribute = {
        meta_key: '',
        meta_values: '',
        unit: ''
    };

    AuthService.getCurrentUser(function (user) {
        $scope.current_user = user;
        $scope.product.created_by = $scope.current_user.id;
    });

    Attributes.fetchAllAttributes(function (response) {
        $scope.attributes = response.message;
        $scope.attributes.unshift({meta_key: "Select an attribute"});
        console.log("Attributes", $scope.attributes);
    });

    $scope.addAttributes = function () {
        $scope.product.attributes.push(attribute);
        console.log($scope.product);
        initDropDown($scope.product.attributes.length - 1);
    };

    $scope.initValues = function (index) {
        var selectedValue = $scope.product.attributes[index];
        console.log(selectedValue,$scope.product.attributes[index].meta_values);
    };

和html部分

  <div class="row attribute" ng-repeat="attribute in product.attributes track by $index">

      <div class="input-field col s12 m4">
          <select required md-select
                  ng-model="product.attributes[$index]"
                  ng-change="initValues($index);"
                  ng-options="attribute as attribute.meta_key for attribute in attributes">
          </select>
          <label>Attribute Name</label>
      </div>

      <div class="input-field col s12 m4" ng-show="product.attributes[$index].type == 'select'">
          <select md-select
                  ng-options="value as value for value in product.attributes[$index].meta_values"
                  ng-model="product.attributes[$index].meta_value">
          </select>
          <label>Attribute Values</label>
      </div>

      <div class="input-field col s12 m4" ng-show="product.attributes[$index].type == 'text'">
          <input type="text" id="{{$index }}" ng-model="product.attributes[$index].meta_value">
          <label for="{{$index}}">Attribute Values</label>
      </div>

      <div class="input-field col s12 m2" ng-show="product.attributes[$index].meta_key != 'Select an attribute'">
           <input id="unit" disabled ng-model="product.attributes[$index].unit">
           <label for="unit" class="active">Unit</label>
      </div>

      <div class="input-field col s12 m2">
           <a ng-click="remove($index);">
                <i class="material-icons waves-effect waves-red red-text">close</i>
           </a>
      </div>
   </div>

属性名
属性值
属性值
单位
关闭

我已经想了一段时间了。我已经尝试了很多解决方案。但没有什么是有效的。我如何解决它？任何帮助都将不胜感激。

签出此签出此