Angularjs总结（五）指令运用及常用控件的赋值操作
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); } });
