Angularjs总结（五）指令运用及常用控件的赋值操作

1、常用指令

<div ng-controller="jsyd-controller">
    <div style="float:left;100%; " ng-show="clickValue1=='登记'">

        <div ng-include src="'/partials/11.html'"></div>

    </div>
    <div class="item" ng-class="{true: 'item', false: 'item2'}[clickValue=='受理']">

        <ul>

            <div ng-disabled="IsDisable" ng-click="clickValue='受理'">受理信息</div>

        </ul>

    </div>
</div>

ng-class、ng-show、ng-disabled、ng-if、ng-hide
加载页面时赋值（重点：ng-class的css赋值操作）
$scope.clickValue = '受理';
$scope.clickValue1='登记';
$scope.IsDisable=true;

2.行选中

<table>
    <thead style="background-color:#e4e9ef;">
        <tr>
            <td class="td" style="10%">序号</td>
            <td class="td" style="20%">宗地代码</td>
            <td class="td" style="10%">宗地面积</td>
            <td class="td" style="30%">操作</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-class='{selected: ZJDFG==selectedRow}' ng-click="TDXXClick(ZJDFG)" ng-repeat="ZJDFG in ZJDFGList ">
            <td class="td" ng-bind="$index+1">1</td>
            <td class="td">{{ZJDFG.ZDDM}}</td>
            <td class="td ">{{ZJDFG.ZDMJ}}</td>
            <td class="td ">
                <a name={{postitem.Id}} type="button" ng-click="CheckZJDFG(ZJDFG) ">查看</a>
                <a name={{postitem.Id}} type="button" ng-show="Isck" ng-
                   show="IsShowback" ng-disabled="IsDisable" ng-click="EditZJDFG(ZJDFG) ">编辑</a>
                <a name={{postitem.Id}} type="button" ng-show="Isck" ng-
                   show="IsShowback" ng-click="DeleteZJDFG(ZJDFG.ID) ">删除</a>
            </td>
        </tr>
    </tbody>
</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按钮

<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

<div ng-model="PermissionGroups" class="post_Roles">
    <label ng-repeat="roleItem in PermissionGroups" class="role_name" style="175px;">
        <input type="checkbox" ng-model="roleItem.isChecked" />&nbsp;<label>{{roleItem.name}}</label>
    </label>
</div>

js：

//为true时为选中
$scope.postItemInfo.PermissionGroups = [];
angular.forEach($scope.PermissionGroups,function (value, key) {
    if (value.isChecked) {
        $scope.postItemInfo.PermissionGroups.push(value.id);
    }
});