引入文件
<script type="text/javascript" src="jquery.min.js" ></script>
<script type="text/javascript" src="angular.min.js" ></script>
js代码:
'use strict'; // 严格模式 angular.module('licenseApp').controller('LicenseCtrl', function($scope, $rootScope, $http, $log, $filter, $modal, $location, $state) { $scope.title = 'it's test title'; //数据绑定 $scope.click = function(){ //执行ng-click的方法
console.info('click input');
}
$scope.blur = function(){ //执行ng-blur的方法
console.info($scope.input_value); //根据ng-model输出id 为input_value的ng-model绑定的值;
console.info(input_value.value); //根据id 输出值的方式,不需要预先定义input_value;
}
var list = [1,2,3,4];
_.each(list,function(item){ //遍历list,item依次为1,2,3,4 与jquery遍历相似;
console.info(item);
}) });
//或者
var licenseApp = angular.module('licenseApp');
license.controller('',function(){
})
html代码
<body ng-controller="LicenseCtrl"> <span>{{title}}</span> <input type="text" id="input_value" ng-model="input_value" ng-click="click();" ng-blur="blur();" />
<!--ng-click 可以写入js 赋值语句 ng-click="test=true;" $scope.test的值就赋成了true--> </body>
其他用法
<!--select的两种用法,一种定量option,一种不定量optian。 -->
<body ng-controller="LicenseCtrl"> <select ng-model="select_value" ng-change="change();">
<optian value="">please check</option>
<option value="1">1</option>
<option value="2">2</option>
</select> <!-- $scope.select_value 的值为选中的option,当值有变化会执行$scope.change()方法 -->
<!-- $scope.select_value = [1,2,3]; -->
<select ng-model="value" ng-options="">
</select>
</body>
<script>
http://www.cnblogs.com/laixiangran/p/4956751.html
//此文中对select的ng-option有详细的讲解
</script>
<body ng-controller="LicenseCtrl"> <div>
<input type="checkbox" ng-model="checkbox">
</div>
<div ng-show="checkbox"> <!-- $scope.checkbox的值为true,div显示,为false,div隐藏。相同效果的还有ng-if,ng-if是操作dom,如果有加载控件,或者其他需要加载绑定的内容,用ng-if可能会因为找不到dom而有问题。 -->
</div>
<div>
<button type="button" ng-disabled="checkbox">按钮</button>
<!-- $scope.checkbox的值为true,button不可点击,呈置灰状态,为false,button可以点击 -->
</div> </body>
filter的配置
html代码
<td data-title="'授权状态'" >{{status|authFilter:'status'}}</td>
js代码
licenseApp.filter('authFilter',function(){ return function (item, param) { if ('status' == param) { if ('0' == item) { return '正常'; } else if ('1' == item) { return ''; } else if ('2' == item) { return '已升级'; } else if ('3' == item) { return '已变更'; } else if ('4' == item) { return '已作废'; } } }
配置页面跳转路由
引用文件 <script src="/components/angular/js/angular-ui-router.js"></script>
//这段只是作为记录一下,理解不深说不明确
var licenseApp = angular.module('licenseApp', [ 'ngTable', 'ui.router']); licenseApp.config(function($stateProvider, $urlRouterProvider,mePageLoadingProvider) { $urlRouterProvider.otherwise('/'); $urlRouterProvider.otherwise('/login'); var menu = $("#menu").text(); if (menu) $urlRouterProvider.otherwise('/'+menu); $stateProvider .state({ name : 'auth', url : '/auth', templateUrl : '/auth', resolve: { } }).state({ name : 'log', url : '/log', templateUrl : '/log' }).state({ name : 'setting', url : '/setting', templateUrl : '/setting' }).state({ name : 'user', url : '/user', templateUrl : '/user' }); });