Angular系列之用户增删的demo(五)

本篇将使用angular中的$scope,ng-repeat,ng-click,ng-modal知识点编写一个用户增删的demo,也就是对前面几篇中所提到的这些知识点做一个综合使用。废话不多说,直接看代码:

(稍微使用了es6语法的一点点只是,如果不懂es6语法的,建议看一下《ES6语法(一)》

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div ng-app="workerApp" ng-controller="workerCtrl">

    <h3>工作者群</h3>
    <ul>
        <li ng-repeat="worker in workers track by $index">
            {{worker}} &nbsp;&nbsp;&nbsp;&nbsp;<button ng-click="deleteWorker($index)">删除</button>
        </li>
    </ul>
    <input type="text" placeholder="添加工作者名字" ng-model="name">
    <button ng-click="addWorker(name)">添加</button>
</div>

</body>
</html>
<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
<script type="text/javascript">

    let workerAppModule = angular.module("workerApp", []);
    workerAppModule.controller("workerCtrl", function ($scope) {
        $scope.workers = ["科比", "詹姆斯", "库里", "哈登", "杜兰特"];
        $scope.deleteWorker = index => $scope.workers.splice(index,1);
        $scope.addWorker = name => {
            if (name !== undefined && name !== "") {
                $scope.workers.push(name)
            } else {
                alert("不能为空")
            }
        }
    })
</script>

运行结果:

猜你喜欢

转载自blog.csdn.net/qq_33429583/article/details/83151550