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 :-

We need to use form action ng-submit="addTodo()" or we need to use <button ng-click="addTodo("> please differentiate.
Can anyone define the proper scoping in angular with practical manner in full flex web application ?

Please guide me.. Thanks !!

That will be best if somebody will create a jsfiddle for that. . Also will be great if you post Fiddle with this code, please — Maxim Shoustin
– Maxim Shoustin, Commented Oct 4, 2013 at 12:56
@MAxim I was not able to create It.. I will try to check it again.. I wish to thank you for your invaluable support. — FrontEnd Expert
– FrontEnd Expert, Commented Oct 4, 2013 at 12:57
@Maxim I have created it before .. jsfiddle.net/88ZfB But I am getting some error. I have loaded Angular as well.. Thanks !! — FrontEnd Expert
– FrontEnd Expert, Commented Oct 4, 2013 at 13:00

Maxim Shoustin · Accepted Answer · 2013-10-04 21:59:28Z

2

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]

edited Oct 4, 2013 at 21:59

answered Oct 4, 2013 at 13:11

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

4 Comments

FrontEnd Expert Over a year ago

+1 for your help.. but I am facing some ReferenceError: _ is not defined while using this code..

Maxim Shoustin Over a year ago

1 min ill try to fix it in FIddle

Ayesha Over a year ago

@Neeraj You can use array instead of using json objects that will be better for implementation..

FrontEnd Expert Over a year ago

@MaximShoustin Thank you for your invaluable support !! Answer accepted.. :)

Fourth · Accepted Answer · 2013-10-04 13:42:50Z

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 = '';
      };

edited Oct 4, 2013 at 13:42

answered Oct 4, 2013 at 13:11

Fourth

9,3811 gold badge25 silver badges30 bronze badges

1 Comment

Fourth Over a year ago

It comes from underscore/lodash - i just used it for brevity because i didnt want to write out a whole "indexOf" function, which is a common and google-able function to have. I will modify my answer to use it.

Collectives™ on Stack Overflow

Working with remove clicked element and scoping in angularjs

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related