Зацикливание объекта в Angular и использование ключа внутри ng-show

я создаю простое поле вкладок Angular.js, которое изменяет активное поле в соответствии со значением «вкладка», которое используется внутри ng-show для элементов. Это работает нормально, однако на данный момент я пишу весь HTML статически, и я бы предпочел сократить свой код до простого цикла ng-repeat, чтобы перебрать все элементы div.

Это достаточно просто в PHP, так как я бы использовал цикл foreach и использовал ключ для генерации номера вкладки, я просто не могу сделать это в Angular. Вот мой код на данный момент:

<div id="services-box-nav">
                    <ul>
                        <li><a href="#" ng-click="tab = 1" ng-class="{'active' : tab == 1}">Rewards</a></li>
                        <li><a href="#" ng-click="tab = 2" ng-class="{'active' : tab == 2}">Community</a></li>
                        <li><a href="#" ng-click="tab = 3" ng-class="{'active' : tab == 3}">Partners</a></li>
                        <li><a href="#" ng-click="tab = 4" ng-class="{'active' : tab == 4}">Jobs</a></li>
                        <li><a href="#" ng-click="tab = 5" ng-class="{'active' : tab == 5}">Volunteering</a></li>
                        <li><a href="#" ng-click="tab = 6" ng-class="{'active' : tab == 6}">Feedback</a></li>
                        <li><a href="#" ng-click="tab = 7" ng-class="{'active' : tab == 7}">Gallery</a></li>
                    </ul>
                </div>
                <div id="services-content-boxes">                   
                    <div ng-show="tab == 1">
                        <div class="row">
                            <div class="col-md-12">
                                <h3>{{serviceBoxes.rewards.title}}</h3>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-5">
                                {{serviceBoxes.rewards.text}}
                            </div>
                            <div class="col-md-7">

                            </div>
                        </div>
                    </div>                  
                    <div ng-show="tab == 2">dwd</div>
                    <div ng-show="tab == 3">d</div>
                    <div ng-show="tab == 4">df</div>
                    <div ng-show="tab == 5">gr</div>
                    <div ng-show="tab == 6">r</div>
                    <div ng-show="tab == 7">rg</div>                    
                </div>

 controller('servicesController', function($scope, $location, joomlaService) {  
    $scope.serviceBoxes = {};       
    joomlaService.getArticleDetails(21).then(function(articleReturnData) {          
        $scope.serviceBoxes.rewards = articleReturnData;
    });
    joomlaService.getArticleDetails(22).then(function(articleReturnData) {          
        $scope.serviceBoxes.community = articleReturnData;
    });     
    joomlaService.getArticleDetails(23).then(function(articleReturnData) {          
        $scope.serviceBoxes.partners = articleReturnData;
    });     
    joomlaService.getArticleDetails(24).then(function(articleReturnData) {          
        $scope.serviceBoxes.jobs = articleReturnData;
    });     
    joomlaService.getArticleDetails(25).then(function(articleReturnData) {          
        $scope.serviceBoxes.volunteering = articleReturnData;
    });     
    joomlaService.getArticleDetails(26).then(function(articleReturnData) {          
        $scope.serviceBoxes.feedback = articleReturnData;
    });     
    joomlaService.getArticleDetails(27).then(function(articleReturnData) {          
        $scope.serviceBoxes.gallery = articleReturnData;
    });         
});

Что я хочу сделать, так это перебрать объект serviceBoxes и динамически создать условие ng-show (вкладка == i), используя ключ, который должен увеличиваться каждый раз (1, 2, 3, 4 и т. д.). Я не знаю, как мне это сделать, используя Angular. Это значительно сократило бы мой код, так что чувствую, что это необходимо.

Кто-нибудь может указать, как это делается?

Спасибо


angularjs ng-repeat ng-show
person Jim    schedule 19.12.2014    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Вы можете использовать директиву angular-ui bootstrap Tabset.

  <tabset>
    <tab ng-repeat="serviceBox in serviceBoxes" heading="{{serviceBox.title}}" active="serviceBox.active">
      {{serviceBox.text}}
    </tab>
  </tabset>

Таким образом, ваш вид будет чистым и опрятным.

И ваш контроллер будет выглядеть так:

controller('servicesController', function($scope, $location, joomlaService) {
  $scope.serviceBoxes = [];
  joomlaService.getArticleDetails(21).then(function(articleReturnData) {
    $scope.serviceBoxes.push(articleReturnData);
  });
  joomlaService.getArticleDetails(22).then(function(articleReturnData) {
    $scope.serviceBoxes.push(articleReturnData);
  });
  joomlaService.getArticleDetails(23).then(function(articleReturnData) {
    $scope.serviceBoxes.push(articleReturnData);
  });
  joomlaService.getArticleDetails(24).then(function(articleReturnData) {
    $scope.serviceBoxes.push(articleReturnData);
  });
  joomlaService.getArticleDetails(25).then(function(articleReturnData) {
    $scope.serviceBoxes.push(articleReturnData);
  });
  joomlaService.getArticleDetails(26).then(function(articleReturnData) {
    $scope.serviceBoxes.push(articleReturnData);
  });
  joomlaService.getArticleDetails(27).then(function(articleReturnData) {
    $scope.serviceBoxes.push(articleReturnData);
  });
});

person iulian    schedule 19.12.2014
comment
Вы также можете добавить параметр $index в ng-click($index), который будет возвращать текущий элемент, по которому щелкнули. - person byrdr; 19.12.2014

arrow_upward
0
arrow_downward 

<ul>
   <li ng-repeat="serviceBox in serviceBoxes"><a href="#" ng-click="itemClicked($index)" ng-class="{'active' : $index == selectedIndex}">{{serviceBox.title}}</a></li>
</ul>


<div ng-repeat="serviceBox in serviceBoxes" ng-show="tab == {{selectedIndex}}">{{serviceBox.contents}}</div>

В вашем контроллере:

$scope.selectedIndex = 0; // Default selected index, use -1 for no selection

 $scope.itemClicked = function ($index) {
    $scope.selectedIndex = $index;
  };

Директива ng-repeat перебирает каждый элемент и создает копию элемента html, внутри которого он находится. Если есть 10 элементов для просмотра, у вас будет 10 элементов html. Также вы ссылаетесь на индекс текущего элемента через $index.

ng-click вызовет функцию для itemClicked(), передав текущий индекс через ссылку $index, предоставленную ng-repeat. В нашей функции мы используем этот параметр, чтобы установить для него $scope.selected.

person byrdr    schedule 19.12.2014

arrow_upward
0
arrow_downward

Я пытался создать что-то подобное. Попробуйте код ниже. У меня есть жестко запрограммированный массив mapTab. Вы можете заполнить myTab, используя соответствующие значения из $scope

В контроллере-

$scope.tab;
    $scope.mapTab=[{},{"1": "dwd"},{"2":"d"},{"3":"dwd"},{"4":"df"},{"5":"gr"},{"6":"r"},{"7":"rg"}];

В html--

<div ng-repeat="(key,val) in mapTab">
                <div ng-repeat="prop in val">
                    <div ng-show="tab==key">{{prop}}</div>
                    </div>
                </div>
            </div>

Демо -- http://jsfiddle.net/RahulB007/HB7LU/9348/

person RahulB    schedule 19.12.2014