获取嵌套的对象名称

debugcn 发表于 Dev

西米考尔

我有一个名为“ $ scope.filter”的对象，看起来像这样：

在这种情况下，如何获取嵌套对象的名称（即键）？最好在不涉及控制器的情况下使用该指令，但如果没有它，它将做不到。

 <ul>
   <span ng-repeat="x in filter">
    <span ng-repeat="(key,val) in x">


    <span ng-if="x[key]">/*get values of checked checkboxes here  HOW ?*/  </span>



                     </span>
                     </span>

</ul>

这是我创建复选框的地方：

<ul ng-repeat="(key,value) in filtered=(properties  | filter: filterByCategory | groupBy: 'name') ">

  <li>Group name: <strong>{{ key }}</strong></li>

          <div  ng-repeat="prop in value">
            <label>
                        <input type="checkbox" ng-model="filter[key][$index]">
                        <span>{{prop.Property}}</span>
            </label>
          </div>
 </ul>

控制器代码：

      .controller('dataController', function($scope, $filter)
{
    $scope.properties = [
     {name: 'Weight', Property: 'quintal', value:'50'},
     { name: 'Quantity', Property: 'Litre' , value:'40'},
     { name: 'Quantity', Property: 'ml' , value:'10'},
     { name: 'Height', Property: 'metres' , value:'10' },
     { name: 'Height', Property: 'cm' , value:'20'},
     {name: 'Height', Property: 'inches' , value:'30'},
     { name: 'Size', Property: 'Fat' , value:'28' },
     { name: 'Size',Property: 'Slim', value:'48' },
     { name: 'Feature', Property: 'Sharp' , value:'9'},
     { name: 'Feature', Property: 'Bland', value:'2' },
     {name: 'Weight', Property: 'KG', value:'10'},
     { name: 'Weight', Property: 'grams', value:'20' },
     { name: 'Weight', Property: 'ton' , value:'30'}

];

$scope.filter = {};
$scope.filterByCategory = function (prop) {
    // console.log($scope.filter);

      angular.forEach($scope.filter, function(item){

    for(key in item)
    {
        if(item[key])
        return;
    else
        console.log("show");
        $scope.filter={};


    }
});

     return $scope.filter[prop.name] || noFilter($scope.filter) ;


    };

丹尼斯·托马斯（Denis Thomas）

我对您的结构进行了一些修改，因为在进行绑定时，格式有些复杂：

 $scope.filter = [
    { 
      id: 1,
      groupName: 'Feature',
      options: [
        {id: 1, selected: false },
        {id: 2, selected: false }
      ],
    },
    { 
      id: 2,
      groupName: 'Weight',
      options: [
        {id: 4, selected: false },
        {id: 5, selected: false }
      ],
    },
  ];

然后，您可以在模板中使用一个函数来获取每个选项的名称，如下所示：

  $scope.getName = function(group, option) {
    var options = [];
    for (var i = 0; i < $scope.properties.length; i++){
      if ($scope.properties[i].name === group.groupName){
        options.push($scope.properties[i].Property);
      }
    };
    return options[group.options.indexOf(option)];
  };

如果要从嵌套列表中获取所有选定的选项，则可以使用自定义过滤器，该过滤器将返回在一个列表中展平的所需数据。在那里，您可以包括产生所需结果所需的任何自定义逻辑。
代码将类似于以下示例：

app.filter('groupFilter', function() {
  return function(filterList, properties) {
    var selectedOptions = [];
    // Iterate all groups
    for (var i = 0; i < filterList.length; i++){
      var group = filterList[i];

      // Get names for properties
      var optionNames = [];
      for (var k = 0; k < properties.length; k++){
        if (properties[k].name === group.groupName){
          optionNames.push(properties[k].Property);
        }
      };

      // Find all selected options in group
      for (var j = 0; j < group.options.length; j++){
        var option = group.options[j];
        if (option.selected){
          selectedOptions.push(group.groupName + ' - ' + optionNames[j]);
        }
      }
    }
    return selectedOptions;
  }
});

和相应的html：

<li ng-repeat="option in filter | groupFilter:properties">{{option}}</li>

您可以在下面的示例中看到两者：

var app = angular.module('app', []);
app.filter('groupFilter', function() {
  return function(filterList, properties) {
    var selectedOptions = [];
    // Iterate all groups
    for (var i = 0; i < filterList.length; i++){
      var group = filterList[i];
      
      // Get names for properties
      var optionNames = [];
      for (var k = 0; k < properties.length; k++){
        if (properties[k].name === group.groupName){
          optionNames.push(properties[k].Property);
        }
      };
      
      // Find all selected options in group
      for (var j = 0; j < group.options.length; j++){
        var option = group.options[j];
        if (option.selected){
          selectedOptions.push(group.groupName + ' - ' + optionNames[j]);
        }
      }
    }
    return selectedOptions;
  }
});
app.controller('ctrl',function($scope) {
  $scope.filter = [
    { 
      id: 1,
      groupName: 'Feature',
      options: [
        {id: 1, selected: false },
        {id: 2, selected: false }
      ],
    },
    { 
      id: 2,
      groupName: 'Weight',
      options: [
        {id: 4, selected: false },
        {id: 5, selected: false }
      ],
    },
  ];
  $scope.getName = function(group, option) {
    var options = [];
    for (var i = 0; i < $scope.properties.length; i++){
      if ($scope.properties[i].name === group.groupName){
        options.push($scope.properties[i].Property);
      }
    };
    return options[group.options.indexOf(option)];
  };
  $scope.properties = [
    { name: 'Weight', Property: 'quintal', value:'50'},
    { name: 'Quantity', Property: 'Litre' , value:'40'},
    { name: 'Quantity', Property: 'ml' , value:'10'},
    { name: 'Height', Property: 'metres' , value:'10' },
    { name: 'Height', Property: 'cm' , value:'20'},
    { name: 'Height', Property: 'inches' , value:'30'},
    { name: 'Size', Property: 'Fat' , value:'28' },
    { name: 'Size',Property: 'Slim', value:'48' },
    { name: 'Feature', Property: 'Sharp' , value:'9'},
    { name: 'Feature', Property: 'Bland', value:'2' },
    { name: 'Weight', Property: 'KG', value:'10'},
    { name: 'Weight', Property: 'grams', value:'20' },
    { name: 'Weight', Property: 'ton' , value:'30'}
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  Filter:
  <ul>
    <li ng-repeat="grp in filter track by grp.id">
      {{grp.groupName}}
      <ul>
        <li ng-repeat="option in grp.options track by option.id">
          <label for="check{{option.id}}">
            <input type="checkbox" ng-model="option.selected" id=check{{option.id}}>
            {{getName(grp, option)}}
          </label>
        </li>
      </ul>
      Selected: 
      <span ng-repeat="selectedOption in grp.options | filter:{selected:true} track by selectedOption.id">
         {{getName(grp, selectedOption)}} 
      </span>
    <li>
  </ul>
  <label>
    Selected:
    <ul>
      <li ng-repeat="option in filter | groupFilter:properties">{{option}}</li>
    </ul>
  </label>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。