angular 使用记录

引入文件

<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' }); });



原文地址:https://www.cnblogs.com/zhanghao1799/p/7593109.html