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 に答える