angular简单练习之记录添加、删除

利用angular实现简单的记录添加删除功能，删除记录有两种思路，一种是直接遍历记录数组，并对数组中的每一个对象进行判断，如果被选中则删除，但是这种方式需要注意的是，当有两个连续选中的记录是，后面的选中的记录会被漏掉，因为删除数组的时候，删除对象后面的每一个对象对应下标都会减1，而遍历的顺序是接着删除对象的下标继续往后遍历，因此会漏掉删除对象后面的一个对象，解决方法就是，再删除操作后面再调用一次删除函数；第二种方法是，将记录数组赋值给一个中间变量，然后将记录数组清空，然后遍历中间变量，将没有被选中的对象添加进记录数组中，这种方法不会漏掉数组中任何一个对象；

HTML代码段：

<body ng-app="todoApp" >
<div ng-controller="MyCtrl">
  <h2>我的备忘录</h2>
  <div>
    <input type="text" ng-model="newTodo">
    <button ng-click="add()">添加</button>
  </div>
  <div ng-repeat="todo in todos">
    <input type="checkbox" ng-model="todo.isChecked">
    <span>{{todo.name}}</span>
  </div>
  <button ng-click="remove()">删除选中的按钮</button>
</div>


<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>

JS代码：

angular.module('todoApp',[])
        .controller('MyCtrl',['$scope',function ($scope) {
          $scope.todos = [
            {name:'吃饭',isChecked:false},
            {name:'睡觉',isChecked:false},
            {name:'打豆豆',isChecked:false}
          ];
          //定义添加记录的方法
          $scope.add = function () {
            //判断用户输入的内容是否合法
            if(! $scope.newTodo){
              alert("输入的内容不能为空");
              return;
            }
            //收集整理数据
            var obj = {
              name:$scope.newTodo,
              isChecked:false
            };
            $scope.newTodo = "";
            $scope.todos.unshift(obj);
          };
          //定义删除的办法
         /* $scope.remove = function () {
            $scope.todos.forEach(function (item,index) {
              //找到选中的对象
              if(item.isChecked){
                $scope.todos.splice(index,1);
                $scope.remove();
              }
            })
          };*/
         $scope.remove = function () {
             var oldTodo = $scope.todos;
             $scope.todos = [];
             oldTodo.forEach(function (item,index) {
               if(! item.isChecked){
                   $scope.todos.push(item);
               }
             })
         }
        }])

Cassiel.Lee

发布了50 篇原创文章 · 获赞 5 · 访问量 2万+

私信关注

angular简单练习之记录添加、删除

猜你喜欢