AngularJS - Переключить переменную в одном HTML-теге

Ниже вы можете увидеть пример моего кода: приложение работает нормально, поэтому, когда я нажимаю "Переключить", приложение переключается между двумя переменными.

<body>
<div ng-init="value = 'off'" ng-app='app' ng-controller="myctrl">
<h1 ng-click="value = { 'on': 'off', 'off':'on'}[value]; event.PreventDefault;">Toggle</h1>
  <h3 ng-show="value == 'on'" >{{var1}}</h1>
  <h3 ng-show="value == 'off'" >{{var2}}</h1>  
</div>

<script>
(function () {
'use strict';

angular.module('app', [])
.controller('myctrl', myctrl);

function myctrl($scope){
  $scope.var1 = "Its on";
  $scope.var2 = "Its off";
}
})();
</script>

Следующий вопрос: Как я могу реализовать это, или как лучше всего использовать один тег "h3" для переключения между переменными? Потому что у меня есть много другой информации в моем html-теге, и я всегда повторяю меня для переключения двух переменных...

Источник

3 ответа

Решение

Вы можете добавить условие непосредственно в фигурные скобки

<h3>{{value == 'on' ? var1 : var2}}</h3>

Демо: https://jsfiddle.net/rgvj1nca/

Источник

Вы можете использовать логические значения, чтобы упростить код

<div ng-app='app' ng-init='value = false;' ng-controller="myctrl">
   <h1 ng-click="value = !value; event.PreventDefault;">Toggle</h1>
   <h3 ng-show="value" >{{var1}}</h1>
   <h3 ng-show="!value" >{{var2}}</h1>  
</div>

<script>
(function () {
'use strict';

angular.module('app', [])
.controller('myctrl', myctrl);

function myctrl($scope){
  $scope.var1 = "Its on";
  $scope.var2 = "Its off";
}
})();
</script>
Источник

Вы можете использовать одну переменную и переключать ее значение в контроллере. Таким образом, реализация очень чистая, и вы не вводите много переменных

<body>
<div ng-app='app' ng-controller="myctrl">
  <h1 ng-click="toggleValue()">Toggle</h1>
    <h3>{{var1 ? 'Its on' : 'Its of' }}</h3>
  </h1>
</div>

<script>
  (function () {
    'use strict';

   angular.module('app', [])
    .controller('myctrl', myctrl);

   function myctrl($scope){

     $scope.toggleValue = function () {
       $scope.var1 = !$scope.var1;
     };

   }
  })();
</script>
</body>

Смотрите рабочую реализацию в этом JSBin: https://jsbin.com/tihiru/1/edit?html,js,console,output

Источник
Другие вопросы по тегам