1

我正在一个项目中工作，该项目要求我将多维数组的顶层中的一些项目作为复选框列出，然后根据选中的项目中的哪些项目，我应该只显示属于每个顶级项目的那些子数组项目

现在请多多包涵，因为我才刚刚接触 AngularJS，其中很多内容对我来说还是陌生的，而且还是很新的。我试图找到类似的东西，但没有运气。

我有一个看起来像这样的范围..

$scope.options = [ 
    { pubId:'1' , pubName:'Option A' , pubSubs:[
        { pubSubId:'1' , pubSub:'Sub Option A 1' },
        { pubSubId:'2' , pubSub:'Sub Option A 2' }
        ]
    },
        { pubId:'2' , pubName:'Option B' , pubSubs:[
        { pubSubId:'3' , pubSub:'Sub Option B 1'},
        { pubSubId:'4' , pubSub:'Sub Option B 2'}
        ]
        }    
    ];

和看起来像这样的html...

<div ng-repeat="option in options">
    <ul>
        <li>
            <input type="checkbox" name="pub" value="{{option.pubId}}">
            {{option.pubName}}
        </li>
    </ul>
</div>

<div ng-repeat="option in options">
<div ng-repeat="suboption in option.pubSubs">

    <ul>
        <li>
            <input type="checkbox" name="pub" value="{{suboption.pubSubId}}">
            {{suboption.pubSub}}
        </li>
    </ul>
</div>
</div>

我倾向于以某种方式使用 ng-show/hide，但我不确定这是否可行。

因此，当列出第一个数组顶级项目时

Option A | Option B

如果我只检查“选项 A”

Sub Option A 1 | Sub Option A 2

将在下面的列表中显示..

我知道 ng-checked 也可能以某种方式在这种情况下使用。

非常感谢所有帮助。

4

2 回答 2

2

您可以为此使用过滤器，但是您需要将选择框模型绑定到选定的属性以实现此目的。

未经测试的代码如下：

<div ng-repeat="option in options">
    <ul>
        <li>
            <input type="checkbox" name="pub" ng-model="option.selected" value="{{option.pubId}}">
            {{option.pubName}}
        </li>
    </ul>
</div>

<div ng-repeat="option in options | filter:{selected:true}">
<div ng-repeat="suboption in option.pubSubs">

    <ul>
        <li>
            <input type="checkbox" name="pub" value="{{suboption.pubSubId}}">
            {{suboption.pubSub}}
        </li>
    </ul>
</div>
</div>
于 2013-11-12T02:28:07.203 回答
0

创建这些文件
1-mobiles.html

    <!DOCTYPE html>
    <head>
        <title>Learning AngularJS</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
        <script src="app.js" type="text/javascript"></script>
        <script src="maincontroller2.js" type="text/javascript"></script>
    <style>
    .odd{
         background:#FFFFCC;
    }
    .even{
        background:#CCCCCC;
    }
    tr th{
        background:#666666;
        color:#FFF;
    }
    </style>
    </head>
    <body>
        <div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>

                Select: 
                <select ng-model='selectedMobile'>
                    <option ng-repeat='mobile in mobiles'  value="{{mobile.id}}">{{mobile.name}}</option>
                </select>
                Search:
                <input type='text' ng-model='searchText' />

                <table width="335px" frame="box" rules="all">
                    <tr>
                        <th>ID</th><th>Model</th><th>Price</th>
                    </tr>
                    <tr ng-repeat="label in mobiles[selectedMobile].models |  filter:searchText" ng-class-odd="'odd'" ng-class-even="'even'">
                        <td>{{label.id}}</td>
                        <td>{{label.model}}</td>
                        <td>{{label.price}}</td>
                    </tr>
                    <tr>
                        <td><button ng-click='addNew()'>Add</button></td>
                        <td><input type='text' size="10" ng-model='newModel' /></td>
                        <td><input type='text' size="10" ng-model='newprice' /></td>
                    </tr>
                </table>
                <p>{{(mobiles[selectedMobile].models | filter:searchText).length+0 }} record(s) found.</p>
        </div>
    </body>
    </html>

2-maincontroller.js 

var app = angular.module('MyTutorialApp',[]);
app.controller("MainController", function($scope){
$scope.newModel = null;
$scope.newPrice = null;
$scope.addNew = function() {
    if ($scope.newModel != null && $scope.newModel != "" && $scope.newPrice != null && $scope.newPrice != "") {
        $scope.mobiles.push({
            id  : $scope.mobiles.length,
            name: $scope.newModel,
            //price: $scope.newPrice,
            models:[]
        });
    }
}

$scope.mobiles=[
    {
        id: 0,
        name: 'nokia',
        models: [
            {
                id:0,
                model:'6600',
                price:2000
            },
            {
                id:1,
                model:'6610',
                price:2100
            },
            {
                id:2,
                model:'6300',
                price:2500
            },
            {
                id:3,
                model:'7610',
                price:4100
            },
            {
                id:4,
                model:'7620',
                price:4500
            }
        ]
    },
    {
        id: 1,
        name: 'Samsung',
        models: [
            {
                id:0,
                model:'s1',
                price:2000
            },
            {
                id:1,
                model:'s1.1',
                price:2100
            },
            {
                id:2,
                model:'s2',
                price:2500
            },
            {
                id:3,
                model:'s2 mini',
                price:4100
            },
            {
                id:4,
                model:'S3',
                price:4500
            }
        ]
    },
    {
        id: 2,
        name: 'iPhone',
        models: [
            {
                id:0,
                model:'iphone 3',
                price:2000
            },
            {
                id:1,
                model:'iphone 4',
                price:2100
            },
            {
                id:2,
                model:'ipphone 5',
                price:2500
            },
            {
                id:3,
                model:'iphone 6',
                price:4100
            },
            {
                id:4,
                model:'iphone 7',
                price:4500
            }
        ]
    }
    ];

});

这有你需要的一切，甚至更多....
比如返回的记录
和行替代着色

于 2014-03-11T13:23:41.350 回答