簡単な角度のエクササイズでのレコードの追加と削除

angularを使用して、単純なレコードの追加および削除機能を実装します。レコードを削除するには、2つの方法があります。1つは、レコード配列を直接トラバースし、配列内の各オブジェクトを判断する方法です。選択されている場合、オブジェクトは削除されますが、このメソッドは、、2つの連続する選択されたレコードがある場合、選択されたレコードは失われます。これは、配列を削除すると、削除されたオブジェクトの背後にある各オブジェクトの対応する添え字が1だけ減り、走査の順序がオブジェクトを削除するためです。添え字は引き続き逆方向に移動するため、削除されたオブジェクトの背後にあるオブジェクトは失われます。解決策は、削除操作の後で削除関数を再度呼び出すことです。2番目の方法は、レコード配列を中間変数に割り当ててから配列を空にしてから中間変数を走査し、選択されていないオブジェクトをレコード配列に追加します。このメソッドは配列内のオブジェクトを見逃しません。

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件の元の記事を公開・ Likes5 ・ 20,000以上の訪問

プライベートの手紙の懸念

簡単な角度のエクササイズでのレコードの追加と削除

おすすめ