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); 
    }); 

}]);