todolist

总结：

1，ng-if,判断数组的个数大于0，则为true，就显示；,

2，允许添加重复的数据 track by $index；

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
  <script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.6.5/angular.js"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router.js"></script>
  <style>
    .del{
      float:right;
    }
  </style>
</head>
<body ng-controller="formCtr">
<form action="" class="form-inline" role="form">
  <div class="form-group">
    <input ng-model="text" class="form-control" type="text">
  </div>
  <p>{{text}}</p>
  <button type="button" class="btn btn-primary" ng-click="add()">提交</button>
</form>
<h1 ng-if="teams.length>0">增加的条目</h1>
<ul>
  <!--允许添加重复的数据track by $index-->
  <li ng-repeat="team in teams track by $index">{{team}}
    <a class="del" href="#" ng-click="teams.splice($index,1)">删除</a>
  </li>
</ul>
</body>
</html>
<script type="text/javascript">
angular.module('myApp',[])
    .controller('formCtr',['$scope',function ($scope) {
        $scope.text = "";
        $scope.teams = [];
        $scope.add = function () {
            $scope.teams.push($scope.text);
            $scope.text = "";
        }
    }])
</script>

 

预览：https://besswang.github.io/todolist/#

posted @ 2017-08-14 09:41  最爱小虾  阅读(173)  评论(0)  编辑  收藏  举报