AngularJS uses two ng-repeat directives to manage and manipulate data in

Question

AngularJS uses two ng-repeat directives to manage and manipulate data in

I'm implementing a feature where I have two views in my HTML5 code that display the same list.

<div class="list" data-ng-repeat="item in model.items">
    <div class=list-item">
       {{ item.name }} 
        <a data-ng-click="addToList(item)">
            <span data-ng-hide="item.checked">Add</span>
            <span data-ng-show="item.checked">Remove</span>
        </a>
    </div>
</div>

<div class="checkbox-list" data-ng-repeat="item in model.items">
    <div class=list-item">
       <input type="checkbox" data-ng-checked="item.checked" data-ng-click="addToList(item)" />
       {{ item.name }} 
    </div>
</div>

In my controller, I've defined the method in the scope:

function addToList(item) {
    item.checked = !item.checked;

    for (var i = 0; i < this.$scope.items.length; i++) {
        if (this.$scope.items.id == item.id) {
            this.$scope.items[i] = item;
            break;
        }
    }
}

When I click the Add or Remove button, the list updates but the checkbox remains unchecked.

Conversely, when I check a box, the list does not update accordingly.

How can I resolve this issue?

javascript angularjs

Answer 1

Answer №1

Seems like you're utilizing the controller as syntax.

To make it work, make sure to add the model to the controller itself (assuming that your YourController refers to the controller and that your methods are in the controller):

  for (var i = 0; i < YourController.items.length; i++) {
    if (YourController.items.id == item.id) {
        YourController.items[i] = extension;
        break;
    }
  }

In your YourController, declare:

var YourController = this;

Then in the HTML where you declare the controller, do so as follows:

 ng-controller = "YourController as YourController"

Now, you can access the items in HTML like this:

YourController.items

Answer 2

Seems like you're utilizing the controller as syntax.

To make it work, make sure to add the model to the controller itself (assuming that your YourController refers to the controller and that your methods are in the controller):

  for (var i = 0; i < YourController.items.length; i++) {
    if (YourController.items.id == item.id) {
        YourController.items[i] = extension;
        break;
    }
  }

In your YourController, declare:

var YourController = this;

Then in the HTML where you declare the controller, do so as follows:

 ng-controller = "YourController as YourController"

Now, you can access the items in HTML like this:

YourController.items

Answer 3

Answer №2

It appears that you are combining the javascript function declaration syntax with Angular.

When utilizing Angular, it is important to use Angular syntax in order to take advantage of the synchronization between the model and the view. $scope.addToList = function(){}

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  
  
  $scope.model = {};
  
  $scope.model.items = [{"name":"one"},{"name":"two"}]
  
  
  $scope.addToList = function(item) {
    item.checked = !item.checked;
  }
  
  
  
});

<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e5eae3f1e8e5f6aaeef7c4b5aab0aafc">[email protected]</a>" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    
    <div class="list" data-ng-repeat="item in model.items">
    <div class="list-item">
       {{ item.name }} 
        <a data-ng-click="addToList(item)">
            <span data-ng-hide="item.checked">Add</span>
            <span data-ng-show="item.checked">Remove</span>
        </a>
    </div>
    </div>

<div class="checkbox-list" data-ng-repeat="item in model.items">
    <div class="list-item">
       <input type="checkbox" data-ng-checked="item.checked" data-ng-click="addToList(item)" />
       {{ item.name }} 
    </div>
</div>


    
    
  </body>

</html>

Answer 4

It appears that you are combining the javascript function declaration syntax with Angular.

When utilizing Angular, it is important to use Angular syntax in order to take advantage of the synchronization between the model and the view. $scope.addToList = function(){}

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  
  
  $scope.model = {};
  
  $scope.model.items = [{"name":"one"},{"name":"two"}]
  
  
  $scope.addToList = function(item) {
    item.checked = !item.checked;
  }
  
  
  
});

<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e5eae3f1e8e5f6aaeef7c4b5aab0aafc">[email protected]</a>" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    
    <div class="list" data-ng-repeat="item in model.items">
    <div class="list-item">
       {{ item.name }} 
        <a data-ng-click="addToList(item)">
            <span data-ng-hide="item.checked">Add</span>
            <span data-ng-show="item.checked">Remove</span>
        </a>
    </div>
    </div>

<div class="checkbox-list" data-ng-repeat="item in model.items">
    <div class="list-item">
       <input type="checkbox" data-ng-checked="item.checked" data-ng-click="addToList(item)" />
       {{ item.name }} 
    </div>
</div>


    
    
  </body>

</html>

Answer 5

Answer №3

Make sure to utilize $scope in your function for proper functionality:

$scope.updateList = function (item) {
    item.completed = !item.completed;

    for (var i = 0; i < $scope.todos.length; i++) {
        if ($scope.todos.id == item.id) {
            $scope.todos[i] = updatedItem;
            break;
        }
    }
}

Answer 6

Make sure to utilize $scope in your function for proper functionality:

$scope.updateList = function (item) {
    item.completed = !item.completed;

    for (var i = 0; i < $scope.todos.length; i++) {
        if ($scope.todos.id == item.id) {
            $scope.todos[i] = updatedItem;
            break;
        }
    }
}

AngularJS uses two ng-repeat directives to manage and manipulate data in

Answer №1

Answer №2

Answer №3

Similar questions

Difficulty encountered when displaying JavaScript variable content within HTML in a React component

Is it possible to generate a unique name from an array without any repeats?

What is the process for calculating and determining the exact area the div should be released?

Establishing specific categories for a universal element

Using React-router-dom's Link component can cause styling inconsistencies with material-ui's AppBar Button

Is it possible to have an Iframe that contains content but no src attribute?

I am experiencing issues with launching chromium while running Puppeteer on Windows 11 using node js v19.4

Move the Div element up and down when clicked

Are there any virtual keyboard options available for Angular development?

I'm curious about the significance of the "packages" property in the requireJs config. Can someone explain how it functions?

update the dropdown values in the database by submitting the form

Transition the object in smoothly after the slide has changed

What advantages does Redux offer?

Submitting information through Ajax

What is the process for running the 'ng build' command within Azure DevOps?

The JavaScript .load() function fails to run

Flipping numbers in Arabic font using PDF kit

Iterate through each entry in the database and identify and fix any duplicate records

Automate the execution of webdriver/selenium tests when a form is submitted

Is there a way I can finish animating these divs in a diagonal motion?