Блог

Главная - Вопросы по программированию - изменение переменных по щелчку в angular

изменение переменных по щелчку в angular

#angularjs #angularjs-scope

#angularjs #angularjs-область видимости

Вопрос:

Я полагаю, то, что я ищу, больше похоже на переключатель. в принципе, у меня есть это:

     <i class="checkbox pull-left" ng-click="changePrice()"></i>

У меня есть переменная в моем контроллере, вот так:

     $scope.basePrice = 10;

Что я хочу сделать, это установить флажок, переключить переменную на другой номер. Что я могу сделать. Моя проблема заключается в том, когда я снимаю флажок, и переменная не переключается обратно. Я пробовал оператор if / else if, ng-change, ng-click, я думал, что переключатель может сработать, но на данный момент я невежествен. Любая помощь была бы признательна.

запрошенный пример контроллера:

 app.controller('examplectrl', '[$scope', function($scope){
    $scope.basePrice = 10;
    $scope.changePrice = function(){
    if($('#changePrice.checked')){
     console.log("checked");
    }else{
     console.log("not checked.")
    }
    };

}]);

Комментарии:

1. Можете ли вы показать нам свой код контроллера?

2. я посмотрю, что я могу сделать

Ответ №1:

Я добавил вторую переменную, которая сохраняет значение переключения как boolean

Цена обновлена до 25, но вы можете добавить туда свой собственный код

 var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.basePrice = 10;

  $scope.priceToggle = false;

  $scope.changePrice = function() {
    $scope.priceToggle ? $scope.basePrice = 10: $scope.basePrice = 25;
    $scope.priceToggle = !$scope.priceToggle;
  }
});  
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <button class="checkbox pull-left" ng-click="changePrice()">Change price</button>
  <p ng-bind="basePrice"></p>
</body>

Ответ №2:

Вы можете сделать это без использования функции контроллера:

 angular.module('app', []);  
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <i ng-init="basePrice = 10" class="checkbox pull-left" ng-click="basePrice = basePrice == 10 ? 25 : 10">PRICE</i>
  {{basePrice}}
</body>