Angular实现“我的备忘录”

最新推荐文章于 2020-08-29 10:06:49 发布

Katle

最新推荐文章于 2020-08-29 10:06:49 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/qq_41096610/article/details/102469959

版权

利用angular实现一个简单的“我的备忘录”
.html

<body ng-app="todoApp" >
  <div ng-controller="myCtril">
    <h2>我的备忘录</h2>
    <div>
      <input type="text" ng-model="addTotal">
      <button ng-click="add()">添加</button>
    </div>
    <div ng-repeat="todo in total">
      <input type="checkbox" ng-model="todo.isChecked">
      <span>{{todo.name}}</span>
    </div>
    <button ng-click="delete ()">删除所选中的选项</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('myCtril',['$scope',function (a) {
              a.total = [
                {name:'吃饭',isChecked:false},
                {name:'睡觉',isChecked:false},
                {name:'看书',isChecked:false},
                {name:'背单词',isChecked:false},
                {name:'跑步',isChecked:false},
                ]

      //  定义添加的方法
              a.add = function () {
                //判断用户输入的内容是否合法
                if(!a.addTotal){
                  alert('输入的内容不能为空')
                  return
                }
              //  收集  整理数据
                var obj = {
                  name:a.addTotal,
                  isChecked:false
                }
                a.total.unshift(obj)   //unshift将输入的内容添加到数组的前面
                a.addTotal = ''   //执行后清空
              }

              //定义删除的方法 ：遍历数组删除所选input
             /* a.delete = function(){
                a.total.forEach(function(item,index){
                //    找到选中的total
                      if(item.isChecked){   //用户当前选中的
                        a.total.splice(index,1)
                        a.delete() //递归调用，删除选中的第一个以后，在接着删除后面选中的
                      }
                })
              }*/
              //定义删除的方法：将数组赋值给一个空数组，显示为选中的数组单元
                a.delete = function () {
                  var oldTotal = a.total
                  a.total = []
                  oldTotal.forEach(function (item,index) {
                    //找到未选中的留下来
                    if(!item.isChecked){  //未选中的数组单元
                      a.total.push(item)
                    }

                  })

                }
      }])

效果
在这里插入图片描述