javascript - 如何使用 angularjs 基于复选框选中和取消选中来制作复选框列表？

Question

我有一个包含移动品牌和型号的对象。我已在此处包含我的对象

angular.module('myApp', [])
    .controller("myCntrl", function ($scope) {

$scope.items= [{


    id: "986745",
    brandname: "Nokia",
    modelname: "Lumia 735 TS"

}, {

    id: "896785",
    brandname: "Nokia",
    modelname: "Nokia Asha 230"
}, {

    id: "546785",
    brandname: "Nokia",
    modelname: "Lumia 510"
},
{

    id: "144745",
    brandname: "Samsung",
    modelname: "Galaxy Trend 840"
},

{

    id: "986980",
    brandname: "Samsung",
    modelname: "Galaxy A5"
},
{

    id: "586980",
    brandname: "Samsung",
    modelname: "Galaxy Note 4 Duos"
},
{

    id: "986980",
    brandname: "Samsung",
    modelname: "Galaxy A5"
},
{

    id: "586980",
    brandname: "Samsung",
    modelname: "Galaxy Note Duos"
},

{

    id: "232980",
    brandname: "Htc",
    modelname: "Htc One X9"
},
{

    id: "456798",
    brandname: "Htc",
    modelname: "Desire 820"
},
{

    id: "656798",
    brandname: "Htc",
    modelname: "Desire 810S"
}

]

})

我的期望: 这里我有 3 个移动品牌以及各自的型号。当我进入此页面时，它应该显示 3 个复选框(在我给出的下面)

1. 诺基亚
2. 三星
3. 宏达电

如果我点击诺基亚，那么它应该显示带有复选框的诺基亚手机型号 喜欢(带有复选框的列表)

1. Lumia 735 TS
2. 诺基亚 Asha 230
3. Lumia 510

如果我点击 Samsung 或 Htc 那么它应该显示相应的型号，例如诺基亚

当我提交时，我应该只得到选中的复选框值，包括品牌名称和型号名称，任何人都可以帮助我

Answer 1

创建一个过滤器来过滤唯一值。

AngularJs Remove duplicate elements in ng-repeat

如果将品牌名称放在单独的数组中会更好。反正。使用该过滤器创建复选框。每个复选框都会有一个单独的 ng-change，如果您选中/取消选中该框，它将触发。在检查时，您会将品牌名称推送到具有选定品牌名称的数组中。取消选中后，您将从该数组中删除品牌名称。

好的。现在我们已经在数组中选择了品牌名称。接下来，您将在 html 中放入一个嵌套的 ng-repeat。第一个 ng-repeat 将迭代选定的品牌名称，第二个 ng-repeat 将迭代项目数组。在第二个 ng-repeat 中，您将拥有 ng-if，它将通过将当前商品品牌名称与当前父品牌名称进行比较来过滤模型。

示例嵌套ng-repeat html:

<div ng-repeat="brand in selectedBrands">
  <div ng-repeat="item in items" ng-if="item.brandname === brand">
    // checkboxes and stuff here
  </div>
</div>

如果您仍然无法自己编写代码，稍后如果我有时间，我可能会发布更多代码;)

编辑:

这是我快速想出的东西:JSFiddle

希望有帮助:P