前端框架AngularJS综合练习-1
摘要：小程序前端开发环境 前端开发系统环境搭建 web前端开发的社会环境 html 代码 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>angularJS 综……
小程序前端开发环境 前端开发系统环境搭建 web前端开发的社会环境
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>angularJS 综合练习</title>
</head>
<body>
<body ng-app=”myApp” ng-controller=”userCtrl”>
<div class=”container”>
<h3>Users</h3>
<table class=”table table-striped”>
<thead>
<tr>
<th>Edit</th>
<th>id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat=”user in users”>
<td>
<button class=”btn” ng-click=”editUser(user.id)”>
<span class=”glyphicon glyphicon-pencil”></span> Edit
</button>
</td>
<td>{{ user.id }}</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr>
</tbody>
</table>
<hr>
<button class=”btn btn-success” ng-click=”editUser(‘new’)”>
<span class=”glyphicon glyphicon-user”></span> 添加一个新用户
</button>
<hr>
<h3 ng-show=”edit”>添加一个新用户:</h3>
<h3 ng-hide=”edit”>修改密码:</h3>
<form class=”form-horizontal”>
<div class=”form-group”>
<label class=”col-sm-2 control-label”>First Name:</label>
<div class=”col-sm-10″>
<input class=”form-control” type=”text” ng-model=”fName” ng-disabled=”!edit” placeholder=”First Name”>
</div>
</div>
<div class=”form-group”>
<label class=”col-sm-2 control-label”>Last Name:</label>
<div class=”col-sm-10″>
<input class=”form-control” type=”text” ng-model=”lName” ng-disabled=”!edit” placeholder=”Last Name”>
</div>
</div>
<div class=”form-group has-feedback” ng-hide=”edit” ng-class=”{false:’has-error’}[oldPass]”>
<label class=”col-sm-2 control-label”>Old Password:</label>
<div class=”col-sm-10″>
<input class=”form-control” type=”password” ng-model=”passw0″ placeholder=”旧密码默认是各行的ID”>
<span class=”glyphicon glyphicon-remove form-control-feedback” aria-hidden=”true” ng-show=”!oldPass”></span>
</div>
</div>
<div class=”form-group has-feedback” ng-class=”{false:’has-error’}[samePass]”>
<label class=”col-sm-2 control-label”>New Password:</label>
<div class=”col-sm-10″>
<input class=”form-control” type=”password” ng-model=”passw1″ placeholder=”New Password”>
<span class=”glyphicon glyphicon-remove form-control-feedback” aria-hidden=”true” ng-show=”!samePass”></span>
</div>
</div>
<div class=”form-group has-feedback” ng-class=”{false:’has-error’}[samePass]”>
<label class=”col-sm-2 control-label”>Repeat:</label>
<div class=”col-sm-10″>
<input class=”form-control” type=”password” ng-model=”passw2″ placeholder=”Repeat New Password”>
<span class=”glyphicon glyphicon-remove form-control-feedback” aria-hidden=”true” ng-show=”!samePass”></span>
</div>
</div>
</form>
<hr>
<button class=”btn btn-success” ng-disabled=”error || incomplete” ng-click=”modifyPassWord()”>
<span class=”glyphicon glyphicon-save”></span> {{txt}}
</button>
</div>
<script>
var app = angular.module(‘myApp’, []);
var users = [{
id: 1,
fName: “点击”,
lName: “前面”,
passWord: “1”
}, {
id: 2,
fName: “编辑”,
lName: “按钮”,
passWord: “2”
}, {
id: 3,
fName: “可以”,
lName: “修改”,
passWord: “3”
}, {
id: 4,
fName: “各行”,
lName: “密码”,
passWord: “4”
}, {
id: 5,
fName: “shi”,
lName: “qi”,
passWord: “5”
}];
app.controller(“userCtrl”, function ($scope) {
$scope.fName = “”;
$scope.lName = “”;
$scope.selectedId = “”;
$scope.edit = false;
$scope.incomplete = true;
$scope.error = true;
$scope.txt = “Save Changes”;
$scope.samePass = true;
$scope.oldPass = true;
$scope.users = window.users;
$scope.editUser = function (id) {
$scope.selectedId = id;
$scope.passw0 = “”;
$scope.passw1 = “”;
$scope.passw2 = “”;
if (id == “new”) {
$scope.fName = “”;
$scope.lName = “”;
$scope.edit = true;
$scope.txt = “add user”;
} else {
$scope.edit = false;
$scope.fName = $scope.users[id – 1].fName;
$scope.lName = $scope.users[id – 1].lName;
$scope.txt = “Save Changess”;
};
};
$scope.modifyPassWord = function () {
if ($scope.selectedId == “new”) {
var newUser = {
id: $scope.users.length + 1,
fName: $scope.fName,
lName: $scope.lName,
passWord: $scope.passw1
};
$scope.users.push(newUser);
} else {
console.log($scope.users[$scope.selectedId – 1])
$scope.users[$scope.selectedId – 1].passWord = $scope.passw2;
console.log($scope.users[$scope.selectedId – 1])
};
$scope.fName = “”;
$scope.lName = “”;
$scope.passw0 = “”;
$scope.passw1 = “”;
$scope.passw2 = “”;
$scope.edit = true;
$scope.txt = “Save Changes”;
$scope.incomplete = true;
$scope.error = true;
$scope.selectedId = “”;
};
$scope.$watch(“passw2”, function () {
$scope.test();
});
$scope.$watch(“passw1”, function () {
$scope.test();
});
$scope.$watch(“passw0”, function () {
$scope.test2();
});
$scope.test = function () {
if ($scope.passw1 == $scope.passw2) {
$scope.error = false;
$scope.samePass = true;
} else {
$scope.error = true;
$scope.samePass = false;
};
if ($scope.fName.length && $scope.lName.length && $scope.passw1.length && $scope.passw2.length) {
$scope.incomplete = false;
} else {
$scope.incomplete = true;
};
};
$scope.test2 = function () {
if (!$scope.selectedId) return false;
if ($scope.passw0 != $scope.users[$scope.selectedId – 1].passWord && $scope.passw0) {
$scope.oldPass = false;
} else {
$scope.oldPass = true;
}
};
});
</script>
</body>
</html>
怎样搭建前端开发环境 android web前端开发环境搭建 前端本地开发环境搭建
» 本文来自：前端开发者 » 《前端框架AngularJS综合练习-1》
» 本文链接地址：https://www.rokub.com/5808.html
» 您也可以订阅本站：https://www.rokub.com
近期评论