使用AngularJS从数组中删除元素可以通过以下步骤实现:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
var app = angular.module('myApp', []);
<div ng-app="myApp" ng-controller="myCtrl">
app.controller('myCtrl', function($scope) {
$scope.myArray = [1, 2, 3, 4, 5];
});
<div ng-repeat="item in myArray">
{{ item }}
</div>
$scope.removeItem = function(item) {
var index = $scope.myArray.indexOf(item);
if (index > -1) {
$scope.myArray.splice(index, 1);
}
};
<button ng-click="removeItem(item)">删除</button>
完整的示例代码如下:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="item in myArray">
{{ item }}
<button ng-click="removeItem(item)">删除</button>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myArray = [1, 2, 3, 4, 5];
$scope.removeItem = function(item) {
var index = $scope.myArray.indexOf(item);
if (index > -1) {
$scope.myArray.splice(index, 1);
}
};
});
</script>
</body>
</html>
这样,当点击"删除"按钮时,对应的元素将从数组中删除。
AngularJS HTML DOM
AngularJS为HTML DOM 元素的属性提供了绑定应用数据的指令。
ng-disabled指令
ng-disabled指令直接绑定应用数据到HTML的disabled属性。
实例:
<button ng-disableled="mySwitch">点我!</button
AngularJS表单
AngularJS表单时输入控件的集合
HTML控件
一下HTML input 元素被称为HTML 控件:
input 元素
select元素
button元素
textarea元素
HTML 表单
AngularjS表单上实例
AngularJS ng-model 指令
ng-model 指令用于绑定应用程序数据到HTML 控制器(input,select,textarea)的值
ng-model指令
ng-model指令可以将输入域的值与AngularJS 创建的变量绑定。
实例: