AngularJs学习——实现列表内容项的增加删除

效果截图：

说明：引入bootstrap.min.css样式库和angular.min.js的静态资源库，实现列表内容的增加和删除操作。

AngularJS代码：

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

    <script>

        angular.module('myapp',[])

               .controller('myctrl',function($scope){

                       $scope.item = '';

                       $scope.items = [];

                       //增加列表项方法

                       $scope.add = function(){

                           $scope.items.push($scope.item);

                       }

               })

    </script>

HTML代码：

<!DOCTYPE html>

<html lang="en" ng-app="myapp">

<head>

    <meta charset="UTF-8">

    <title>AngularJS实现列表内容项的增加、删除</title>

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"/>

</head>

<body style="padding: 20px">

    <div class="container" ng-controller="myctrl">

        <div class="row">

            <div class="col-md-offset-2 col-md-5">

            <div class="input-group">

                <input type="text" class="form-control" ng-model="item">

                <span class="input-group-btn">

                    <button class="btn btn-primary" ng-click="add()">增加内容</button>

                </span>

            </div>

            </div>

        </div>

        <div class="row">

            <div class="col-md-offset-2 col-md-5">

                <h6 style="margin-top: 10px;" ng-if="items.length>0">列表内容：</h6>

                <div class="list-group">

                    <div class="list-group-item" ng-repeat="item in items track by $index">

                        {{item}} <a href="#" ng-click="items.splice($index,1)">删除</a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

巴特西

AngularJs学习——实现列表内容项的增加删除

最新文章

热门文章