切換條件Angularjs與<a>標記

Question

我正在處理代碼，其中我有一個< a>標記下的圖標。最初，我有一個下拉，所以顯示一個div很容易，因爲下拉列表有一個值，但是如何在一個< a>標籤下編碼相同的東西？

Answer 1

HTML

<div ng-controller="appCtrl"> 
    <div> 
     <a href="#" ng-click="assignVal('X')">X</a> 
     <a href="#" ng-click="assignVal('Y')">Y</a> 
     <a href="#" ng-click="assignVal('Z')">Z</a>   
</div> 

     <div ng-if="showX">X --> div</div> 
     <div ng-if="showY">Y --> div</div> 
     <div ng-if="showZ">Z --> div</div> 

    </div> 

控制器：

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

    appModule.controller('appCtrl', function($scope) { 

     $scope.assignVal = function(val) {   
      if (val === 'X') { 
       $scope.showX = true; 
       $scope.showY = false; 
       $scope.showZ = false; 
      } else if (val === 'Y') { 
       $scope.showX = false; 
       $scope.showY = true; 
       $scope.showZ = false; 
      } else if (val === 'Z'){ 
       $scope.showX = false; 
       $scope.showY = false; 
       $scope.showZ = true; 
      } 
     } 
    }); 

Answer 2

如果要在單擊<a>時指定變量值，請使用ng-click而不是ng-model。

<a href="#" ng-click="showX = !showX">X</a> 
<div ng-if="showX">X</div>