Условия Toggle Angularjs with <a> tag

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>