Issue with updating value using angularjs

Question

I am using angular js and am having a hard time figuring out how to update a value. I have tried and have just had no success. I will post my js file, if anyone knows anything about my issue help would be greatly appreciated. It is just updateTask that I am having an issue with.

function TodoCtrl($scope) {

  $scope.todos = [
    {text:'task1', text2:'Mow the lawn', selected:false},         
    {text:'task2', text2:'Wash the car', selected:false}
  ];

  $scope.getTotalTodos = function () {
    return $scope.todos.length;
  };


  $scope.addTask = function () {
    $scope.todos.push({text:$scope.formTodoName, text2:$scope.formTodoDescription,  selected:false});
    $scope.formTodoName = '';
    $scope.formTodoDescription = '';
  };

  $scope.removeTask = function () {
    $scope.todos = _.filter($scope.todos, function(todo){
      return !todo.selected;
    });
  };
  $scope.updateTask = function () {
    if ($scope.todos.selected:true){
      $scope.todos.put({text:$scope.formTodoName, text2:$scope.formTodoDescription, selected:false});
      $scope.formTodoText = '';
    };
  };


}

index.html

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Todo App</title>
    <header>Todo App</header>


    <link rel="stylesheet" href="css/reset.css">


        <link rel="stylesheet" href="css/style.css">




  </head>

  <body>

    <html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="//use.edgefonts.net/vast-shadow:n4:all.js"></script>
    <script src="//use.edgefonts.net/vast-shadow:n4:all;megrim.js"></script>
  </head>
  <body>
    <div class="todo-wrapper" ng-controller="TodoCtrl">
      <h2>You have <span class="emphasis">{{getTotalTodos()}}</span> tasks</h2>
      <ul>
        <li ng-repeat="todo in todos">
          <input type="checkbox" ng-model="todo.selected"/>
          <span class="selected-{{todo.selected}}">{{todo.id}} {{todo.text}}: {{todo.text2}} {{todo.date_created}}</span>
        </li>
      </ul>
      <form>
        <input class="add-input" placeholder="task name" type="text" ng-model="formTodoName" ng-model-instant />
        <input class="add-input2" placeholder="task decription" type="text" ng-model="formTodoDescription" ng-model-instant />
        <button class="add-btn" ng-click="addTask()"><h2>Add</h2></button>
      </form>
      <form>
        <input type="text" ng-model="task.text"></input>
        <button class="update-btn" ng-click="updateTask()"><h3>Update Task</h3></button>
      <button class="clear-btn" ng-click="removeTask()">Remove Task</button>
    </div>
  </body>

</html>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js'></script>

        <script src="js/index.js"></script>




  </body>
</html>

Angular 2-way binding should take care of updating your view. Not sure what you mean. Can you provide an example? — Qi Tang
– Qi Tang, Commented Jul 14, 2015 at 21:59
So if there is a task that has been added and you want to now change that task, how would you approach that? I have been trying but I am rather new with angular so I am unsure as how to do this. — Jacob Brauchler
– Jacob Brauchler, Commented Jul 14, 2015 at 22:01
there's a disconnect in not knowing how you select task to update. Also $scope.todos is an array , has no property selected and syntxax for if ($scope.todos.selected:true) is invalid. Provide demo including html ...even if it's broken a bit — charlietfl
– charlietfl, Commented Jul 14, 2015 at 22:02
You need a unique key (such as id) on your $scope.todos array elements that you can use later to find/update elements. Also Array.put is not a function. — mz3
– mz3, Commented Jul 14, 2015 at 22:03
I select task to update with a checkbox i use selected for either removing or updating a task. — Jacob Brauchler
– Jacob Brauchler, Commented Jul 14, 2015 at 22:03

mz3 · Accepted Answer · 2015-07-15 01:15:35Z

1

You mentioned that your todos do have an id property from your backend.

$scope.todos = [
  {id: 1, text:'task1', text2:'Mow the lawn', selected:false},         
  {id: 2, text:'task2', text2:'Wash the car', selected:false}
];

Then to update one of them,

$scope.updateTask = function (task) {

  // search $scope.todos for the item to update
  var indexOfTask;
  for(var i=0;i<$scope.todos.length;i++) {
     if($scope.todos[i].id===task.id) indexOfTask = i;
  }

  // update the todo
  $scope.todos[indexOfTask] = todo;

};

You haven't posted your form HTML, but you'll need to pass in the task being updated in the submit handler.

<form ...>
  ...
  <input type="text" ng-model="task.text"></input>
  <input type="submit" ng-click="updateTask(task)"></input>
</form>

Edit Update your form inputs and submit button to pass the object through:

<input class="add-input" placeholder="task name" type="text" ng-model="task.text" ng-model-instant />
<input class="add-input2" placeholder="task decription" type="text" ng-model="task.text2" ng-model-instant />
...
<button class="add-btn" ng-click="addTask(task)"><h2>Add</h2></button>

edited Jul 15, 2015 at 1:15

answered Jul 14, 2015 at 22:15

mz3

1,35412 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jacob Brauchler Over a year ago

Thank you for your help I will give this a try as soon as I get a chance.

mz3 Over a year ago

Sure thing. It would help if you add your form HTML to the question so I can make sure the solution is correct.

mz3 Over a year ago

It's difficult for me to give you exact code since I don't have the full details of your project. Try to understand the design pattern though and make it work for you.

mz3 Over a year ago

I did fix one typo though, try one more time.

Collectives™ on Stack Overflow

Issue with updating value using angularjs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related