Question

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

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

每个产品都可以包含一系列属性，唯一的区别在于，而不是将meta_values作为数组，产品中的每个属性都将具有单个值作为meta_value。 JSON表示如下： -

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

这就是页面的样子。

我担心的是，无论我在尝试什么，第二个选择的值完全取决于第一个选择下拉列表的值，不会填充。

空的第二个下拉列表。

我尝试使用静态数据填充第二个下拉列表并且工作正常。但是，当数据取决于第一个下拉列表的选择时，数据不会改变。这是我的控制器。

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

我一直试图想一想。尝试了很多解决方案。但没有什么可行的。我该如何解决？任何帮助都将非常感激。

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

0 个答案: