使用删除clicked元素并在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);

我在删除元素时遇到问题.当我点击删除它删除最后一个元素.我也试过拼接,但无法取得成功.

这里有一个 Fiddle

一些关注与Angular实现相关: -

1. 我们需要使用表单操作ng-submit="addTodo()"或我们需要使用<button ng-click="addTodo(">请区分.

2. 任何人都可以在完全灵活的Web应用程序中以实用的方式定义角度的正确范围吗？

请指导我..谢谢!!

Answer 1

您可以尝试两种filter选择splice

筛选

超文本标记语言

添加ng-click="theFilter(blog)

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

• 使用_filter：

喜欢：

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
             );
     });      
 };

看Fiddle

其他方式是：

添加ng-click="splice(blog, bloges)

拼接

超文本标记语言

<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);
 };

看Fiddle

作为旁注

如何_filter：

filter_.filter(list, iterator, [context]) 别名：select
查找列表中的每个值，返回通过真值测试（迭代器）的所有值的数组。委托给本机过滤器方法（如果存在）。

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