AngularJS display only принадлежит subarray

Я работаю над проектом, который требует, чтобы я перечислял некоторые элементы из верхнего уровня многомерного массива в качестве флажков, а затем в зависимости от того, какой из элементов проверен, я должен отображать только эти вспомогательные массивы предметы, принадлежащие каждому верхнему элементуAngularJS display only принадлежит subarray

Теперь, пожалуйста, воздержитесь от меня, потому что я просто вхожу в 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>

Я склонялся к использованию нг-шоу/скрыть как-то, но я Я не уверен, что это путь.

Так, когда элементы верхнего уровня первого массива перечислены

Option A | Option B

Если я проверяю «Вариант А» только

Sub Option A 1 | Sub Option A 2

, которые будут отображаться в списке ниже ..

Я понимаю, что ng-checked также может быть использован в этом контексте.

Вся помощь очень ценится.

источник

2013-11-12 GRowing

Plunker please (: –

Для этого вы можете использовать фильтры, однако вам необходимо привязать выбранную модель окна к выбранному свойству, чтобы добиться этого.

Непроверенные код следующим образом:

<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-12 02:28:07 ricick

Спасибо за подталкивание в правильном направлении. Мой фактический код более сложный, но это дает мне понимание того, что мне нужно. Спасибо, и в этой уменьшенной модели ваш код действительно работает просто отлично. Я ценю это. Думаю, мне нужно глубже заглянуть в документацию .. (хотя добраться до места довольно сложно. Я считаю, что трудно сбиться с земли с помощью ng-js) – GRowing

Держись на нем. Это того стоит :) – ricick

создать эти файлы
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-11 13:23:41

Ум ,, спасибо? .. Я не уверен, что вы отправили в нужное место, но это определенно полезный образец кода. – GRowing

AngularJS display only принадлежит subarray

ответ

Смежные вопросы