1-16.Angular备忘录-添加已完成

1.添加已完成数组

app.controller('taskController', ['$scope', function ($scope) {
...
    $scope.finishList = [
        {name:'SK87', checked:true},
        {name:'SKV5', checked:true}
    ];
}


2.遍历数组,ng-repeat, ng-checked

<div class="list_body">
    <ul>
        <li class="item" ng-repeat="fin in finishList">
        <input type="checkbox" ng-checked="fin.checked">
        <!--<span class="item_content">SKV587SKV587</span>-->
        <span class="item_content">{{fin.name}}</span>

        <span class="del">删除</span>
        <span class="detail">详情</span>
        </li>
    </ul>
</div>

3.添加已完成方法

app.controller('taskController', ['$scope', function ($scope) {

//定义添加已完成方法
$scope.addFinish = function (key) {
    //从原来数组中取出删除元素, splice 返回删除元素的数组
    var items = $scope.taskList.splice(key, 1);
    //改变选中状态
    items[0].cheched = true;
    //添加到已完成任务列表中
    $scope.finishList.push(items[0]);

    };

}

4.给 checkbox 添加点击完成方法 ng-click="addFinish(key)"

<!--展示模型数据-->
<li class="item" ng-repeat="item in taskList" >
    <input type="checkbox" ng-checked="item.checked" ng-click="addFinish(key)">

....
</li>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基础ng属性指令 布尔属性 布尔属性代表一个true或false值。当这个属性出现时,这个属性的值就是true(无...
    oWSQo阅读 1,218评论 0 0
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,632评论 0 3
  • 基础ng属性指令 ng-hrefng-srcng-disabledng-checkedng-readonlyng-...
    JUN_API阅读 514评论 0 0
  • AngularJSAngularJS 是一个 MV* 框架, 最适于开发客户端的单页面应用。它不是个功能库,...
    一直以来都很好阅读 909评论 0 0