angularjs顯示/隱藏標籤

Question

在這裏，我使用angularjs和bootstrap顯示數組中的選項卡。 我想要的是當我點擊特定的選項卡時，它應該只顯示該選項卡的內容。

即（當我點擊動態2我想顯示的動態2含量和隱藏動態-1和動態3片的內容）的所有標籤的

現在我得到的內容點擊。

JS文件

var items=[ 
          { 
           Name:"tab1", 
           id:1, 
           content:"FirstTab", 
           title:"Dynamic-1", 
           templateUrl:"first.html" 

           }, 

           { 
           Name:"tab2", 
           id:2, 
           content:"SecondTab", 
           title:"Dynamic-2", 
           templateUrl:"second.html" 


           }, 

           { 
           Name:"tab3", 
           id:3, 
           content:"ThirdTab", 
           title:"Dynamic-3", 
           templateUrl:"third.html" 
           } 
         ]; 

}]); 

HTML文件

<ul class="nav nav-tabs"> 
      <li ng-repeat="l in list" > 

       <a href="#firsttab" ng-click="tab = 1" data-toggle="tab" > 
      {{l.title}} </a> 

       <div class="tab-content" > 
        <div id="firsttab" ng-click="tab = 1" ng- 
               show="tab===1"> 
        Id: {{l.id}} <br> 
        Name: {{l.Name}} <br> 
        Content: {{l.content}} <br> 
        TemplateFile: <div ng-include="l.templateUrl"></div> 
       </div> 

</ul> 
     </div> 
    </li> 

Answer 1

如果您在父控制器類似這樣的廣播

$scope.$broadcast('itmObj',{ itemsArray: items}); 

然後你可以使用的副漁獲物的孩子像控制器和 奧尼爾你有items陣列中args.itemsArray

$scope.$on('itmObj', function (event, args) { 
var x = args.itemsArray; // args.itemsArray is your items from parentcontroller 
}); 

Answer 2

model.js（只要改變這個文件的代碼我在下面寫的代碼。它會給你想要的結果） 我們必須提供延遲廣播，使其工作。

define(['jquery','ocLazyLoad','cssinjector'], function() { 
    var app=angular.module('App', ['angular.css.injector','oc.lazyLoad']); 
    app.controller('mycontroller', ['$scope','$ocLazyLoad','cssInjector','$rootScope','$timeout', 
    function($scope,$ocLazyLoad,cssInjector,$rootScope,$timeout) { 

      alert("modal-loaded"); 

      $ocLazyLoad.load("http://localhost:8080/tabs/js/modal1.js") 
      .then(function(){ 
       alert("modal1 loaded"); 
       $scope.view="http://localhost:8080/tabs/view.html"; 
       cssInjector.add("http://localhost:8080/tabs/style.css"); 
     }); 


      // ARRAY 

       var items=[ 
           { 
            Name:"tab1", 
            id:1 
            }, 

            { 
            Name:"tab2", 
            id:2 
            }, 

            { 
            Name:"tab3", 
            id:3 
            } 
          ]; 

        $timeout(function(){ 
         $rootScope.$broadcast('itmObj', items); 
       },0); 

    }]); 




     angular.element(function() { 
     angular.bootstrap(document, ['App']); 
     });   
    }); 

Answer 3

試圖在惰性加載的modalController和模態視圖看起來像這樣 Modal.js

define(['jquery','ocLazyLoad','cssinjector'], function() { 
    var app=angular.module('App', ['angular.css.injector','oc.lazyLoad']); 
    app.controller('mycontroller', ['$scope','$ocLazyLoad','cssInjector', 
    function($scope,$ocLazyLoad,cssInjector) { 

      alert("modal-loaded"); 
      // ARRAY 
      var items=[{ 
          Name:"tab1", 
          id:1 
         },{ 
          Name:"tab2", 
          id:2 
         },{ 
          Name:"tab3", 
          id:3 
         }]; 

      var lazyLoadModal1 = function(){ 
       var deferred = $q.defer(); 
       $ocLazyLoad.load("http://localhost:8080/tabs/js/modal1.js") 
       .then(function(){ 
        alert("modal1 loaded"); 
        $scope.view="http://localhost:8080/tabs/view.html"; 
        cssInjector.add("http://localhost:8080/tabs/style.css"); 

        deferred.resolve(); 
        },function(){ 
        deferred.reject(); 
        }); 
       return deferred.promise; 
      }; 
      var init = (function(){ 
       lazyLoadModal1().then(function(){ 
        $scope.$broadcast('itmObj', {item:items}); 
       }); 
      })(); 
    }]); 

View.html

<div ng-controller="modalcontroller"> 
    <div ng-repeat="vm in itemsArray"> 
    <p>{{vm.Name}}</p> 
    <p>{{vm.id}}</p> 
    </div> 
</div> 

Modal1添加一個承諾.js

angular.module('App', ['angular.css.injector','oc.lazyLoad']) 
.controller("modalcontroller", ['$scope','$ocLazyLoad','cssInjector', 
function($scope,$ocLazyLoad,cssInjector){ 

     alert("In modal Controller"); 

     $scope.$on("broadcast-started", function (event, data){ 
       $scope.itemsArray=data.item; 
       console.log($scope.itemsArray); 
    }); 

}]);