1、常用指令
1 <div ng-controller="jsyd-controller">
2 <div style="float:left;width:100%; " ng-show="clickValue1=='登记'">
3
4 <div ng-include src="'/partials/11.html'"></div>
5
6 </div>
7 <div class="item" ng-class="{true: 'item', false: 'item2'}[clickValue=='受理']">
8
9 <ul>
10
11 <div ng-disabled="IsDisable" ng-click="clickValue='受理'">受理信息</div>
12
13 </ul>
14
15 </div>
16 </div>
ng-class、ng-show、ng-disabled、ng-if、ng-hide
加载页面时赋值(重点:ng-class的css赋值操作)
$scope.clickValue = '受理';
$scope.clickValue1='登记';
$scope.IsDisable=true;
2.行选中
1 <table>
2 <thead style="background-color:#e4e9ef;">
3 <tr>
4 <td class="td" style="width:10%">序号</td>
5 <td class="td" style="width:20%">宗地代码</td>
6 <td class="td" style="width:10%">宗地面积</td>
7 <td class="td" style="width:30%">操作</td>
8 </tr>
9 </thead>
10 <tbody>
11 <tr ng-class='{selected: ZJDFG==selectedRow}' ng-click="TDXXClick(ZJDFG)" ng-repeat="ZJDFG in ZJDFGList ">
12 <td class="td" ng-bind="$index 1">1</td>
13 <td class="td">{{ZJDFG.ZDDM}}</td>
14 <td class="td ">{{ZJDFG.ZDMJ}}</td>
15 <td class="td ">
16 <a name={{postitem.Id}} type="button" ng-click="CheckZJDFG(ZJDFG) ">查看</a>
17 <a name={{postitem.Id}} type="button" ng-show="Isck" ng-
18 show="IsShowback" ng-disabled="IsDisable" ng-click="EditZJDFG(ZJDFG) ">编辑</a>
19 <a name={{postitem.Id}} type="button" ng-show="Isck" ng-
20 show="IsShowback" ng-click="DeleteZJDFG(ZJDFG.ID) ">删除</a>
21 </td>
22 </tr>
23 </tbody>
24 </table>
ng-click、ng-repeat、ng-class的运用
行选中
$scope.TDXXClick = function (data) {
$scope.selectedRow = data;
}
3.下拉框 ng-options、ng-model的运用
<select ng-model="QLLXCode " ng-options="option.Code as option.Name for option in QLLX "></select>
js:
var add = { "Name": "--请选择--", "Code": "-1" };
QLLX.unshift(add);
$scope.QLLX = [{Code:1,name:'nihao'},{Code:2,name:'nihao'}];
if ($scope.QLLXCode == null)
$scope.QLLXCode = $scope.QLLX[0].Code;
4.radio按钮
1 <input value="{{item.ID}}" name="ztfaxz" type="radio" ng-model="meIsChecked" ng-click="MeClick(item.ID)" />
js:
//当value和meIsChecked相等时为选中
$scope.meIsChecked = $scope.Custom.MeID;
5.checkbox
1 <div ng-model="PermissionGroups" class="post_Roles">
2 <label ng-repeat="roleItem in PermissionGroups" class="role_name" style="width:175px;">
3 <input type="checkbox" ng-model="roleItem.isChecked" /> <label>{{roleItem.name}}</label>
4 </label>
5 </div>
js:
//为true时为选中
$scope.postItemInfo.PermissionGroups = [];
angular.forEach($scope.PermissionGroups,function (value, key) {
if (value.isChecked) {
$scope.postItemInfo.PermissionGroups.push(value.id);
}
});
更多专业前端知识,请上 【猿2048】www.mk2048.com