在 angularjs 中使用删除单击的元素和范围

Working with remove clicked element and scoping in angularjs

本文关键字：元素 范围 单击 删除 angularjs      更新时间：2023-09-26

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

我在删除元素时遇到问题。当我单击删除它删除最后一个元素时。我也尝试过拼接，但未能取得成功。

这是一个小提琴

一些与 Angular 实现相关的问题：-

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

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

请指导我..谢谢！！

您可以

尝试两个选项filter和splice

滤波器

.HTML

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

见小提琴

其他方式是：

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

拼接

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

见小提琴

作为旁注

_filter的工作原理：

过滤器_.filter(list, iterator, [context]) 别名：选择
查看列表中的每个值，返回一个包含 all 的数组 通过真值检验的值（迭代器）。代表 本机筛选器方法（如果存在）。 
var evens = _.filter（[1， 2， 3， 4， 5， 6]， function（num）{ return num % 2 == 0; }）;=> [2， 4， 6]

由于流行，它将删除最后一个元素。您需要找到要查找的元素的索引并将其拼接。为简洁起见，使用短划线：

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

理想情况下，您实际上会从视图中传入"博客"，这样您就不需要每次在删除时都进行对象表示。

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