本篇将使用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}} <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>
运行结果: