控制器中的多個ng顯示功能的單一功能

我有幾個我用Angular編寫的函數來通過範圍在頁面上顯示多個ng-show屬性。我試圖用if語句將所有三個函數放到一個函數中，但是我無法再次獲取該函數。我想知道是否有一種方法可以在單個函數中執行此操作，以及這種功能的最佳實踐是什麼。控制器中的多個ng顯示功能的單一功能

JS小提琴是在這裏 - http://jsfiddle.net/ezy_/01L050mr/2/

這裏的，因此目前在3個不同的功能傳播JS。

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

 
function AppCtrl($scope) { 
 
    $scope.skillsState = false; 
 

 
    $scope.rolesState = false; 
 

 
    $scope.qualsState = false; 
 

 
    $scope.skillsStateTrigger = function() { 
 
    $scope.skillsState = true; 
 
    $scope.rolesState = false; 
 
    $scope.qualsState = false; 
 
    }; 
 

 
    $scope.rolesStateTrigger = function() { 
 
    $scope.skillsState = false; 
 
    $scope.rolesState = true; 
 
    $scope.qualsState = false; 
 
    }; 
 

 
    $scope.qualsStateTrigger = function() { 
 
    $scope.skillsState = false; 
 
    $scope.rolesState = false; 
 
    $scope.qualsState = true; 
 
    }; 
 
}

我需要$手錶或$應用功能觸發更新，如果我設置從單一statesTrigger（RESP）函數來觸發功能？

來源

2016-01-20 Ezra

這是您的重構。訣竅是使用一個對象來存儲3個狀態。

JS：

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

function AppCtrl($scope) { 
    $scope.states = { 
    skills: false, 
    roles: false, 
    quals: false 
    }; 

    $scope.trigger_state = function(state) { 
    for(var i in $scope.states) { 
     $scope.states[i] = (i == state); 
    } 
    }; 
}

HTML：

<body ng-app="app" class="ng-scope"> 
    <div class="container ng-scope" ng-controller="AppCtrl"> 
    <button ng-click="trigger_state('skills')">Skills</button> 
    <button ng-click="trigger_state('roles')">Roles</button> 
    <button ng-click="trigger_state('quals')">Quals</button> 
    <div class="row" ng-show="states.skills" style="display: none;"> 
    Skills State Active 
    </div> 
    <div class="row" ng-show="states.roles" style="display: none;"> 
    Roles State Active 
    </div> 
    <div class="row" ng-show="states.quals" style="display: none;"> 
    Quals State Active 
    </div> 
</div> 

</body>

在它還挺一個壞主意，使用的三種狀態的情況下，可以使用1個一個變量來存儲「狀態」= 「mystate」例如（因爲州是獨佔的）。

來源

2016-01-20 23:35:28

看一看這裏：updated with 1 function

$scope.triggerState = function (state) { 
 
    if (state == 'skills') { 
 
     $scope.skillsStateTrigger(); 
 
    } else if (state == 'roles') { 
 
     $scope.rolesStateTrigger(); 
 
    } else if (state == 'quals') { 
 
     $scope.qualsStateTrigger(); 
 
    } 
 
    }

<button ng-click="triggerState('skills')">Skills</button> 
 
    <button ng-click="triggerState('roles')">Roles</button> 
 
    <button ng-click="triggerState('quals')">Quals</button>

你甚至可以在HTML本身這樣的更加具體：State variable

<body ng-app="app" class="ng-scope"> 
 
    <div class="container ng-scope" ng-controller="AppCtrl"> 
 
    <button ng-click="currentState = 'skills'">Skills</button> 
 
    <button ng-click="currentState = 'roles'">Roles</button> 
 
    <button ng-click="currentState = 'quals'">Quals</button> 
 
    <div class="row" ng-show="currentState == 'skills'" style="display: none;"> 
 
     Skills State Active 
 
    </div> 
 
    <div class="row" ng-show="currentState == 'roles'" style="display: none;"> 
 
     Roles State Active 
 
    </div> 
 
    <div class="row" ng-show="currentState == 'quals'" style="display: none;"> 
 
     Quals State Active 
 
    </div> 
 
    </div> 
 
</body>

來源

2016-01-20 23:43:50

控制器中的多個ng顯示功能的單一功能

回答

相關問題