如何在$ scope單擊時更改變量的值？

Question

我想在用戶單擊特定URL時將$scope.complete的值更改為false 。 在Angular中可以這樣做嗎？

我根據此變量向用戶顯示信用卡表格。 在第一頁加載中，根據來自服務器端的值（該值表明文件中是否有信用卡），該變量為true / false。

如果文件上有信用卡，那么我想輸入一個change網址。 單擊該選項會將$scope.complete的值更改為false並顯示信用卡表格。

這是我目前的代碼：

JS

  $scope.complete = false;
  djangoAuth.profile().then(function(data){
    $scope.model = data;
    if ($scope.model.profile.stripe_id.length <= 0)
      $scope.complete = false;
    else
      $scope.complete = true;
  });

的HTML：

<div ng-if="complete == false">
 <!--show form-->
</div>
<div ng-if="complete == true">
 Credit card already on file. <a href="#">Change?</a>
</div>

Answer 1

看到這個小提琴，顯示ng-單擊archive（）

http://jsfiddle.net/dakra/U3pVM

  <a href="" ng-click="archive()">archive</a>

  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };

這不是我的擺弄，而是顯示了如何使用它。

文檔也位於：

https://docs.angularjs.org/api/ngTouch/directive/ngClick

Answer 2

您可以將函數綁定到ng-cick，並讓該函數更改屬性的值：

 var myApp = angular.module('myApp', []); function MyCtrl($scope) { $scope.complete = true; $scope.change = function() { $scope.complete = false; }; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="MyCtrl"> <div ng-show="complete == false"> form here </div> <div ng-show="complete == true"> Credit card already on file. <a href="#" ng-click="change()">Change?</a> </div> </div> 

Answer 3

JS

$scope.complete = false;
  djangoAuth.profile().then(function(data){
    $scope.model = data;
    // default scope
    $scope.complete = true;
    $scope.change = function(){
        $scope.complete = true;
    }
    if ($scope.model.profile.stripe_id.length <= 0)
      $scope.complete = false;
    else
      $scope.complete = true;

  });

的HTML：

<div ng-if="complete == false">
 <!--show form-->
</div>
<div ng-if="complete == true">
 Credit card already on file. <a ng-click="change()" ng-href="#">Change?</a>
</div>