Question

我正在尝试根据我的条件创建复选框列表，但我无法解决控制器中的问题我已经给出了两个变量

var selectedbrand = 'Nokia';
var submodel ='Lumia';

基于这两个变量复选框列表应该更改，例如我给出的 selectedbrand ='诺基亚';和var submodel ='Lumia';这个3复选框应该显示

1.Lumia 735 TS

2.Lumia 510

3.Lumia 830

这个应该显示在复选框

中

"submodel": [
                        {
                            "price": "7500",
                            "name": "Lumia 735 TS"
                        },
                        {
                            "price": "8100",
                            "name": "Lumia 510"
                        },
                        {
                            "price": "9900",
                            "name": "Lumia 830"
                        }
                    ],

如果我改变这两个变量

var selectedbrand='Nokia';

var submodel='Asha';

应显示

2复选框

1.Asha 230

2.Asha Asn01

这个应该显示在复选框

中

"submodel": [
                        {
                            "price": "10000",
                            "name": "Asha 230"
                        },
                        {
                            "price": "11999",
                            "name": "Asha Asn01"
                        }
                    ]

同样的事情对于三星也基于两个变量复选框列表应该改变。帮我解决task.i已经添加了我的代码

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
var selectedbrand = 'Nokia';
var submodel ='Lumia';
    $scope.phones = [{
    "_id": {
        "$oid": "56a9c44f40d0275643cfc04e"
    },
    "default": [],
    "Categories": [
        {
            "models": [
                {
                    "submodel": [
                        {
                            "price": "7500",
                            "name": "Lumia 735 TS"
                        },
                        {
                            "price": "8100",
                            "name": "Lumia 510"
                        },
                        {
                            "price": "9900",
                            "name": "Lumia 830"
                        }
                    ],
                    "name": "Lumia"
                },
                {
                    "submodel": [
                        {
                            "price": "10000",
                            "name": "Asha 230"
                        },
                        {
                            "price": "11999",
                            "name": "Asha Asn01"
                        }
                    ],
                    "name": "Asha"
                }
            ],
            "brandname": "Nokia",
            "id": "986745"
        },
        {
            "models": [
                {
                    "submodel": [
                        {
                            "price": "5000",
                            "name": "Trend 840"
                        },
                        {
                            "price": "6999",
                            "name": "A5"
                        }
                    ],
                    "name": "Galaxy"
                },
                {
                    "submodel": [
                        {
                            "price": "12000",
                            "name": "Asha 230"
                        }
                    ],
                    "name": "Asha"
                }
            ],
            "brandname": "Samsung",
            "id": "144745"
        }
    ],
    "Storename": "Zig Zag Mobiles",
    "__v": 0
}

    ]
}

我的HTML代码：

<div ng-app="myApp" ng-controller="MyCtrl">
  <div class="item" ng-repeat="item in phones" ng-show="filteredEntries.length">
    {{ item.Categories.models.name }}
 <ul>
  <li ng-repeat="model in filteredEntries = (item.models | filter:{ model.name: 'Nokia'})" class="model">
    <input type="checkbox" ng-checked="item.checked"> {{ model.submodel.name }}
  </li>
</ul>
<button ng-click="checkItems()">Do</button>
</div>  
</div>

我在这里添加了演示 check demo

Answer 1

@ user3093073，你在html中完全歪曲你的模型。我创建了this fiddle作为起点。要获取所需的数据，必须嵌套ng-repeat 4 deep（phones.Categories.models.submodel）并从该点开始应用过滤器

更新：用于告知范围选择了哪些子模型的更改

  <div class="item" ng-repeat="item in phones">
    {{ item.Storename }}
    <div ng-repeat="cat in item.Categories | filter:brandname">
      {{cat.brandname}}
      <div ng-repeat="model in cat.models | filter:submodel" class="model">
        {{model.name}}
        <ul>
          <li ng-repeat="submodel in model.submodel">
            <input type="checkbox" 
                  ng-checked="selectedItems.indexOf(submodel)>-1" 
                  ng-click="toggleSelected(submodel)"> 
            {{submodel.name}}: {{submodel.price | currency}}
          </li>

        </ul>
      </div>
    </div>

    <button ng-click="checkItems()">Do</button>
  </div>

然后在控制器中：

$scope.selectedItems = [];

$scope.toggleSelected = function(submodel) {
    var idx = $scope.selectedItems.indexOf(submodel);
    if (idx==-1) $scope.selectedItems.push(submodel);
    else $scope.selectedItems.splice(idx,1);
}

使用该功能，您所选择的子模型集将始终可供您的控制器使用。您唯一需要注意的是确保在更改模型时清除所选项目数组。

Answer 2

我认为您使用的是AngularJS的更新版本，但无论如何请参阅此代码：

<div class="item" ng-repeat="item in phones">
    <div ng-repeat="cat in item.Categories" ng-show="cat.brandname==selectedbrand">
      <h2><b>{{ cat.brandname }}</b></h2>
        <div ng-repeat="models in cat.models" ng-show="models.name==submodel">
          <h3>
            <b>{{models.name}}</b>
          </h3>
          <div ng-repeat="submodels in models.submodel">
            <input type="checkbox" ng-model="checkbox_model[$index].isChecked"/>{{ submodels.name }} 
          </div>
     </div>
 </div>

请参阅此链接：http://jsfiddle.net/HB7LU/23061/

如何使用angularjs为我的condtion制作复选框？

2 个答案: