"Is there a way to update the value of a variable within $scope when a specific action

Question

"Is there a way to update the value of a variable within $scope when a specific action

Is it possible in Angular to change the value of $scope.complete to false when a specific URL is clicked by the user?

I display a credit card form based on the value of this variable. Initially, the value is set to true or false depending on the data from the server side indicating if there is a credit card on file.

If there is a credit card on file, I want to include a change link. When this link is clicked, the value of $scope.complete should be changed to false and the credit card form will be shown.

This is my current code:

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>

javascript angularjs

Answer 1

Answer №1

To update the value of a property in AngularJS, you can bind a function to ng-click and have it modify the property:

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">
        Add your form here
    </div>
    <div ng-show="complete == true">
         Credit card information is already on file. <a href="#" ng-click="change()">Want to change?</a>
    </div>
</div>

Answer 2

To update the value of a property in AngularJS, you can bind a function to ng-click and have it modify the property:

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">
        Add your form here
    </div>
    <div ng-show="complete == true">
         Credit card information is already on file. <a href="#" ng-click="change()">Want to change?</a>
    </div>
</div>

Answer 3

Answer №2

Take a look at this sample demonstrating ng-click in action with 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);
    });
  };

This example is not mine, but it illustrates how to implement the functionality.

For further details, refer to the documentation:

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

Answer 4

Take a look at this sample demonstrating ng-click in action with 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);
    });
  };

This example is not mine, but it illustrates how to implement the functionality.

For further details, refer to the documentation:

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

Answer 5

Answer №3

JavaScript

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

  });

HTML:

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

Answer 6

JavaScript

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

  });

HTML:

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

"Is there a way to update the value of a variable within $scope when a specific action

Answer №1

Answer №2

Answer №3

Similar questions

Error: JSON parsing error - Unexpected token U found at the beginning of JSON string while making a POST request

Choose a specific <div> element by its unique ID and trigger a click event on it as soon as the page loads

React infinite scroll component fails to trigger the next function

Tips for resolving a flickering issue that occurs when switching to an input field with our default value / placeholder plugin

Updating the default color of selected text within a webpage's content

What is the best way to show instructions immediately upon receipt of a response?

What is the best way to display data retrieved through Ajax, jQuery, and JavaScript on an HTML page

Perform an Ajax POST request to a PHP script

In Pure JavaScript, an HTML element is added every time the click event is triggered

Confusion in implementing AngularJS code

Is it possible to dynamically adjust the number of children in an array?

Tips for viewing images using javascript?

Tips for simulating focus on a Material-ui TextField with a button press

Can you explain the concept of the "Regular Expression Denial of Service vulnerability"?

The custom directive is designed to trigger its watcher only once and does not continue to monitor changes

Module cannot be resolved within react-viro

Is there a way to deliberately trigger an error using Selenium WebDriverIO?

Is there a more efficient method to send a large quantity of input element data to an API via a POST request?

Is there a way for the React select component to adjust its width automatically based on the label size?

Transforming XML into Json using HTML string information in angular 8