Angularjs binding array splice

Question

I have an issue with splicing an array:

I m displaying my array like this :

Email:<input type="text" ng-model="newcontact"/>
    <button ng-click="add(newcontact)">Add</button>
    <h2>Contacts</h2>

  <ul id="todo-list">
    <li ng-repeat="contact in contacts">

            <a href="#">{{contact.libelle}}</a>
            <a href="#" ng-click="del($index)">del</a>
    </li>
  </ul>

My controller is :

angular.module('angulartestApp')
  .controller('MainCtrl', function ($scope,$log) {
    var $scope.contacts = [{libelle:'test'},{libelle:'test2'}];

    $scope.add = function(newcontact) {
        $scope.contacts.push({libelle:newcontact});
        $scope.newcontact = '';
    };

    $scope.del = function (idx){
        $scope.contacts.splice(idx, 1);
        for (var i=0;i<$scope.contacts.length;i++)
        {
            $log.info($scope.contacts[i].libelle+',');
        }

    };

  });

If I add two items ('a' and 'b'), my view displays the good items in my list ('test', 'test2', 'a','b').

If I delete the 'a' item, my view displays only the two initial items of my list ('test', 'test2'). But in the console everything is good, 'test', 'test2' and 'b' gets well displayed.

I don't understand why. If someone can show me the good way to do it...

Thank you.

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

Is the page being reloaded when you click the del link? Try using a button instead of to verify. This may also help:

href causes unintended page reload with Angularjs and Twitter Bootstrap

edited May 23 '17 at 12:27

Community

1
1

answered Mar 16 '14 at 16:07

Designing the Code

246
1
5

my page is not being reloaded – user1260928 Mar 16 '14 at 18:37
Actually, I re checked, my windows seems to be reloaded when it leaves the del() function, not when exiting the add() function. – user1260928 Mar 16 '14 at 19:13
Use a button for delete rather than a link. – Designing the Code Mar 17 '14 at 16:06

Angularjs binding array splice

1 Answers1