HBuilder中的布局文件
<body ng-app="myApp" ng-controller="myCtrl">
查询：<input type="text" placeholder="请输入查询关键字" ng-model="sera" />
排序：<select ng-model="orderKey">
<option value="">--请选择--</option>
<option value="birth">生日正序</option>
<option value="-birth">生日倒序</option>
</select>
<input type="button" value="添加" ng-click="showAdd =!showAdd" /><br />
<br />
<div ng-show="showAdd">
姓名：<input type="text" placeholder="请输入姓名" ng-model="name" /><span ng-show="showName">姓名不能为空</span><br />
性别：<select ng-model="sex">
<option value="">--请选择--</option>
<option value="男">男</option>
<option value="女">女</option>
</select><span ng-show="showSex">请选择性别</span><br />
生日：<input type="date" ng-model="birth" /><span ng-show="showBirth">请输入生日</span><br />
住址：<select ng-init="s1 = pros[0]" ng-model="s1" ng-options="p.pro for p in pros" ng-change="changeCity(s1)">
<option value="">--请选择省份--</option>
</select>
市：<select ng-init="s2 = citys[0]" ng-model="s2" ng-options="c for c in citys">
<option value="">--请选择城市--</option>
</select><br />
<input type="button" value="提交添加" ng-click="addPro()" />
</div>
<br />
<table border="1px" bordercolor="green" cellpadding="5px">
<tr style="background-color: gray;">
<th><input type="checkbox" ng-model="check" ng-click="All()"/></th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>住址</th>
<th>操作</th>
</tr>
<tr ng-repeat="s in stu| filter:sera |orderBy:orderKey">
<td><input type="checkbox" ng-model="s.ck"/></td>
<td>{{s.name}}</td>
<td>{{s.sex}}</td>
<td>{{s.birth | date:'yyyy-MM-dd hh:mm'}}</td>
<td>{{s.zhuzhi}}</td>
<td>
<input type="button" value="删除" ng-click="deleteStu(s.name)" />
</td>
</tr>
</table>
<input type="button" value="批量删除" ng-click="deleteMore()" style="background-color: green;"/>
<input type="button" value="全选反选" ng-click="xuan()" style="background-color: yellow;"/>
<br /><br />
</center>
</body>
------------------------------------------------------------------------------
依赖angular与JQuery
<script src="../libs/angular.min.js"></script>
<script src="../libs/jquery-1.11.0.min.js"></script>
JS代码
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
//模拟数据
$scope.stu=[{
name:"张三",
sex:"男",
birth: new Date("1998-10-06" ),
zhuzhi:"北京西二旗"
},{
name:"李四",
sex:"女",
birth: new Date("1997-11-26" ),
zhuzhi:"北京西二旗"
},{
name:"王五",
sex:"男",
birth: new Date("1999-05-06" ),
zhuzhi:"北京西二旗"
}];
//定义城市
$scope.pros = [{pro:"北京",childer:["西二旗","上地"]},
{pro:"河北",childer:["邯郸","石家庄","保定"]}];
$scope.citys = $scope.pros[0].childer;
$scope.changeCity = function(s1){
$scope.citys = $scope.s1.childer;
}
//添加
$scope.addPro = function(){
var stus = {};
//信息校验
if($scope.name==null||$scope.name==""){//姓名校验不为空
$scope.showName = true;
return;
}else{
stus.name = $scope.name;
$scope.showName = false;
}
if($scope.sex == null){//性别校验
$scope.showSex = true;
return;
}else{
stus.sex = $scope.sex;
$scope.showSex = false;
}
if ($scope.birth == null) {//生日校验
$scope.showBirth = true;
return;
} else{
stus.birth = $scope.birth;
$scope.showBirth = false;
}
stus.zhuzhi = $scope.s1.pro+$scope.s2;
$scope.stu.push(stus);
//添加隐藏
$scope.showAdd = false;
}
//删除
$scope.deleteStu = function(sname){
for (var i = 0; i < $scope.stu.length; i++) {
if ($scope.stu[i].name == sname) {
$scope.stu.splice(i,1)
}
}
}
//点击标题的复选框，实现全选功能
$scope.All = function(){
for (var i = 0; i < $scope.stu.length; i++) {
$scope.stu[i].ck = $scope.check;
}
}
//全选反选
$scope.xuan = function(){
for (var i = 0; i < $scope.stu.length; i++) {
$scope.stu[i].ck = !$scope.stu[i].ck;
}
}
//批量删除
$scope.deleteMore = function(){
for (var i = 0; i < $scope.stu.length; i++) {
if($scope.stu[i].ck){
$scope.stu.splice(i,1);
i--;
}
}
}
});
</script>
-----------------------------------------------------------
（单独修改方法）
var updateGood = "";//要修改的商品信息
$scope.showGood = function(gname){
//显示修改回显区域
$scope.showUpdate = true;
//遍历数组，找到要修改的商品
for (var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].name == gname){
updateGood = $scope.goods[i];
break;
}
}
//显示修改信息到页面，，第一步得到修改信息
$scope.upname = updateGood.name;
$scope.upprice = updateGood.price;
$scope.upproduct = updateGood.product;
}
//提交修改
$scope.updateGood = function(){
updateGood.name = $scope.upname;
updateGood.price = $scope.upprice;
updateGood.product = $scope.upproduct;
//隐藏修改回显区域
$scope.showUpdate = false;
}
-------------------------------------------------------------------------
（修改布局文件）
<div ng-show="showUpdate">
商品名称：<input type="text" ng-model="upname" /><br />
商品价格：<input type="number" ng-model="upprice" /><br />
商品产地：<input type="text" ng-model="upproduct" /><br />
<input type="button" value="提交修改" ng-click="updateGood();" />
</div>