Question

我是Angular的新手，我正在尝试制作一些内容，如果你点击一个标签，ng-repeat将显示具有某个属性的所有内容，如果你点击另一个标签，ng-repeat witll会显示不同的内容属性。但是我无法让标签控制器与ng-show一起使用。这是我的代码：

   <ul class = "nav nav-pills" ng-controller = "TabController as tabCtrl">
      <li ng-class="{'active':tabCtrl.isTab(1)}">
        <a ng-click="tabCtrl.setTab(1)" href = "#"> All </a>
      </li>
      <li ng-class="{'active':tabCtrl.isTab(2)}">
        <a ng-click="tabCtrl.setTab(2)" href = "#"> Online </a>
      </li>
      <li ng-class="{'active':tabCtrl.isTab(3)}">
        <a ng-click="tabCtrl.setTab(3)" href="#"> Offline </a> 
      </li>
    </ul>
    ...
    <div class = "user" ng-repeat="streamer in twitch.users" ng-show="tabCtrl.isTab(1)">
         //... repeated stuff here
    </div>

这是TabController的js代码：

    app.controller('TabController', function(){
       this.tab = 1;
       this.setTab = function(t){
         this.tab = t;
       }
       this.isTab = function(t){
         return (this.tab == t);
       }
    })

然而ng-show没有显示任何内容，因为isTab（）始终为false。任何人都可以向我解释原因吗？

Answer 1

使用注释中提到的pattern来保持对控制器对象的引用。这就是你如何使用＆＃34;控制器作为＆＃34; AngularJS中的语法：

app.controller('TabController', function(){
    var self = this;
    this.tab = 1;

    this.setTab = function(t){
        // inside a function "this" is not the controller
        // it is a reference to the function
        self.tab = t;
    };

    this.isTab = function(t){
        return (self.tab == t);
    };
})

角JS。如何使用ng-show

1 个答案: