Angularjs总结(五)指令运用及常用控件的赋值操作
2016-07-03 15:00
429 查看
1、常用指令
ng-class、ng-show、ng-disabled、ng-if、ng-hide
加载页面时赋值(重点:ng-class的css赋值操作)
$scope.clickValue = '受理';
$scope.clickValue1='登记';
$scope.IsDisable=true;
2.行选中
ng-click、ng-repeat、ng-class的运用
行选中
$scope.TDXXClick = function (data) {
$scope.selectedRow = data;
}
3.下拉框 ng-options、ng-model的运用
js:
4.radio按钮
js:
5.checkbox
js:
<div ng-controller="jsyd-controller"> <div style="float:left;width: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="width:10%">序号</td> <td class="td" style="width:20%">宗地代码</td> <td class="td" style="width:10%">宗地面积</td> <td class="td" style="width: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="width:175px;"> <input type="checkbox" ng-model="roleItem.isChecked" /> <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); } });
相关文章推荐
- AngularJS浏览缩放图片
- Angularjs总结(四)$on、$emit和$broadcast的使用
- Angularjs总结(三)摸态框的使用
- Angularjs总结(二)过滤器使用
- AngularJs的UI组件ui-Bootstrap分享(六)——Tabs
- Angular框架中当前页面跳转
- angularJS制作的购物车功能
- AngularJS 表格操作
- AngularJs笔记
- 关于Angularjs1.x dom ready
- $resoure服务的简单学习
- ACdream 1429 Rectangular Polygon
- angularjs中关于checkbox的问题
- 《AngularJs实战》笔记
- AngularJS 避繁就简的路由
- AngularJS使用指令增强标准表单元素功能
- AngularJS内建服务$location及其功能详解
- 学习Angularjs分页指令
- angularjs 获取当前时间并转化为字符串
- 仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件