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" />&nbsp;<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

總結

以上是生活随笔為你收集整理的Angularjs总结（五）指令运用及常用控件的赋值操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。