Question

我正在使用一个名为activeScope的变量来维护状态并在两个表单之间切换。通过调用changeScope进行更新，此变量在单击选项卡时更改值。

此更改已正确注册，可在标签按钮的有效状态之间切换，但div form0和form1根本不会切换。从我看到的情况来看，似乎我没有正确使用ng-show，因为当activeScope的值发生变化时表达式没有进行评估。

以下是我的标签 -

<ul class="nav navbar-nav navbar-right" ng-controller="SearchScope as scope">
    <li ng-repeat="item in scopes" ng-class="{'active': isScopeActive({{$index}})}"><a href="" ng-click="changeScope($index)">{{item}}</a></li>
</ul>

我将div的标记设为 -

<div class="container main-form" ng-controller="SearchScope as scope">
    <div id="form0" ng-show="isScopeActive(0)" ng-controller="SingleIPController as sip">
    ...
    </div>
    <div id="form1" ng-show="isScopeActive(1)">
    ...
    </div>
</div>

控制器代码 -

app.controller("SearchScope", function($scope) {
    $scope.activeScope = 0;
    $scope.scopes = ['Individual IP Data', 'All IP Data'];

    $scope.isScopeActive = function(index){
        if(index == $scope.activeScope){
            return true;
        } else {
            return false;
        }
    };

    $scope.changeScope = function(index){
        $scope.activeScope = index;
    };
});

app.controller("SingleIPController", function($scope, $http){
    ...
});

有人可以建议我使用ng-show做错了什么，以及解决这个问题的正确方法吗？

Answer 1

是的，这不是ng-show的正确用法。这是一个工作演示 - ＆gt; https://jsfiddle.net/agm7pmyw/1/

代码：

<div id="search-container" ng-controller="SearchScope">

  <ul class="nav navbar-nav navbar-right">
    <li ng-repeat="item in scopes" ng-class="{'active' : $index == activeScope}">
      <a href="" ng-click="changeScope($index)">{{item}}</a>
    </li>
  </ul>

  <div class="container main-form">
    <div id="form0" ng-show="activeScope == 0" ng-controller="SingleIPController as sip">
      Scope 1
    </div>
  </div>

  <div class="container main-form">
    <div id="form1" ng-show="activeScope == 1" ng-controller="SingleIPController as sip">
      Scope 2
    </div>
  </div>

</div>

脚本：

var app = angular.module('app', []);

app.controller("SearchScope", function($scope) {
  $scope.activeScope = 0;
  $scope.scopes = ['Individual IP Data', 'All IP Data'];

  $scope.isScopeActive = function(index) {
    if (index == $scope.activeScope) {
      return true;
    } else {
      return false;
    }
  };

  $scope.changeScope = function(index) {
    console.log('changing scope to ' + index);
    $scope.activeScope = index;
  };
});

app.controller("SingleIPController", function($scope, $http) {

});

的CSS：

.active{
  color:red
}

我确实改变了你的标记，你可以玩演示。

干杯！

Answer 2

通过遵循类似于此codepen的方法解决。这几乎就像我想要实现的那样 - Master-Detail模式。

标记 -

<div class="container" ng-app="tabApp">
    <div class="row" ng-controller="TabController">
        <div class="col-md-2">
            <ul class="nav nav-pills nav-stacked">
            <li ng-class="{ active: isSet(1) }">
                <a href ng-click="setTab(1)">Home</a>
            </li>
            <li ng-class="{ active: isSet(2) }">
                <a href ng-click="setTab(2)">Profile</a>
            </li>
            <li ng-class="{ active: isSet(3) }">
                <a href ng-click="setTab(3)">Messages</a>
            </li>
            </ul>
        </div>
        <div class="col-md-8">
            <div class="jumbotron">
            <div ng-show="isSet(1)">
                <h1>Home page</h1>
                <p>Welcome to the website!</p>
                <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
                </div>
                <div ng-show="isSet(2)">
            <h1>Profile page</h1>
            <p>Profile information</p>
            </div>
            <div ng-show="isSet(3)">
            <h1>Messages</h1>
            <p> Some messages </p>
            </div>
        </div>
    </div>
</div>

控制器 -

angular.module('tabApp', [])
.controller('TabController', ['$scope', function($scope) {
    $scope.tab = 1;

    $scope.setTab = function(newTab){
        $scope.tab = newTab;
    };

    $scope.isSet = function(tabNum){
        return $scope.tab === tabNum;
    };
}]);

CSS -

@import "compass/css3";

body {
margin: 15px;
}

/* text recolor */
h1, p, a {
color: #4DC9C9 !important;
}

/* button recolor */
.nav-pills > li.active > a, .btn-primary {
background-color: #6C6C6C !important;
// feeling like it's a rounded corners kind of day
border-color: #6C6C6C !important;
border-radius: 25px; 
}

Angular：ng-show不是连续评估表达式

2 个答案: