Working with remove clicked element and scoping in angularjs

Question

HTML

<div ng-controller="BlogData" >
    <form ng-submit="removeTodo()">
    <ul>
      <li ng-repeat="blog in bloges">
      {{blog.name}}
      <p>{{blog.mobile}}</p>
       <p>{{blog.description}}</p> 
       <input class="btn-primary" type="submit" value="remove">
       <p></p>
      </li>
    </ul>
    </form>

    <form ng-submit="addTodo()">
      <label>Name:</label><input type="text" ng-model="todoName"  size="30"
             placeholder="add your name">
      <label>Mobile:</label><input type="number" ng-model="todoMobile"  size="30"
             placeholder="add your mobile">
      <label>Description:</label><input type="text" ng-model="todoDesc"  size="30"
             placeholder="add some description">
      <hr>
      <h1>Hello {{todoName }}!</h1>  
      <h1>Your mobile is {{todoMobile}}!</h1>
      <h1>About my Details :-  {{todoDesc}}!</h1>
      <input class="btn-primary" type="submit" value="add">
    </form>
</div>

JS

function BlogData($scope) {
  $scope.bloges = [
    {"name": "Nexus S",
     "mobile": "858485454",
     "description": "The nest to seehow it works"},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "mobile": "8584453454",
     "description": "The nest to ytrb  dsfhgs gvd m seehow it works"},
    {"name": "MOTOROLA XOOM™",
     "mobile": "443485454",
     "description": "The nest bla bla  vd fg hvto seehow it works"}
  ];

  $scope.addTodo = function() {
    $scope.bloges.push({name:$scope.todoName, mobile:$scope.todoMobile, description:$scope.todoDesc, done:false});
    $scope.todoName = '';
    $scope.todoMobile = '';
    $scope.todoDesc = '';
  };

  $scope.removeTodo = function() {
    $scope.bloges.pop({name:$scope.todoName, mobile:$scope.todoMobile, description:$scope.todoDesc, done:false});
    $scope.todoName = '';
    $scope.todoMobile = '';
    $scope.todoDesc = '';
  };

}

var blogApp = angular.module('blogApp',[]);
blogApp.controller('BlogData', BlogData);

I am facing problem while deleting the element. When I am clicking a remove its removing the last element. I tried splice as well but not able to reach success.

Here is a Fiddle

Some concern related Angular implementations :-

1. We need to use form action ng-submit="addTodo()" or we need to use <button ng-click="addTodo("> please differentiate.

2. Can anyone define the proper scoping in angular with practical manner in full flex web application ?

Please guide me.. Thanks !!

Answer 1

You can try two options filter and splice

Filter

HTML

Add ng-click="theFilter(blog)

<input class="btn-primary" type="submit" value="remove"  ng-click="splice(blog, bloges)">

• to use _filter:

like:

JS

  $scope.theFilter = function(field) {
   $scope.bloges = _.filter($scope.bloges, function(nodeClient) {
      return !(nodeClient.name == field.name &&
             nodeClient.mobile == field.mobile &&
              nodeClient.description == field.description
             );
     });      
 };

See Fiddle

Other way is:

Add ng-click="splice(blog, bloges)

splice

HTML

<input class="btn-primary" type="submit" value="remove"  ng-click="splice(blog, bloges)">

JS

 $scope.splice = function(field, fields) {     
    fields.splice(fields.indexOf(field), 1);
 };

See Fiddle

as a side note

How _filter works:

filter_.filter(list, iterator, [context]) Alias: select
Looks through each value in the list, returning an array of all the values that pass a truth test (iterator). Delegates to the native filter method, if it exists.

var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
=> [2, 4, 6]

Answer 2

It will remove the last element because of pop. You need to find the index of the element you are looking for and splice it. Using lo-dash for brevity:

$scope.removeTodo = function() {
    var index = $scope.bloges.indexOf({name:$scope.todoName, mobile:$scope.todoMobile, description:$scope.todoDesc, done:false}, 0);
    $scope.bloges.splice(index, 1);
    $scope.todoName = '';
    $scope.todoMobile = '';
    $scope.todoDesc = '';
  };

Ideally, you'll actually pass the "blog" in from the view so you dont need to make the object representations every time in delete.

$scope.removeTodo = function(blog) {
        var index = $scope.bloges.indexOf(blog, 0);
        $scope.bloges.splice(index, 1);
        $scope.todoName = '';
        $scope.todoMobile = '';
        $scope.todoDesc = '';
      };