Angularjs 学习笔记-2017-02-06-双向数据绑定

NG:

　　ng-bind:  标签属性 ng-bind=" obj.xxx  " ，不会出现

　　用于区别{{ }} 标签，当页面未加载完毕时可以看到{{}}标签，非常不雅观，ng-bind可以解决这个问题， 为了方便性，一般ng-bind用在首页，其他子模板可以使用{{}}

 <ul ng-hide="menuState.show">
                    <li ng-repeat="i in [7,8,9,10]" ng-bind="i"></li>
                </ul>

　　

　　ng-class: 动态引用css，css表达式:ng-class="{'error':isError,'warn':isWarn}" 当isError为true时使用error，  用于取代class=“bcg-{{color}}”   其他表达式参考文档

　　

 <div class="panel panel-success " >
        <div class="panel-heading">
            <div class="panel-title">ng-class</div>
        </div>
        <div class="panel-body">
            <div class="panel-body" ng-controller="NgClassCtrl">
               <button ng-class="{'btn':isBtn,'btn-default':isBtnDefault}">NgBtn</button>
            </div>
        </div>
        <div class="panel-footer">this is footer</div>
    </div>

　　ng-click: 触发ng事件，用于触发当前controller或父类作用域下的方法

　　ng-show: ng-show="true|false"

　　ng-hide:与ng-hide相反

<div class="panel panel-warning ">
        <div class="panel-heading">ng-show、ng-hide、ng-click</div>
        <div class="panel-body">
            <div class="panel-body" ng-controller="ToggleMenuCtrl">
                <button class="btn btn-default" ng-click="toggleMenu()">Toggle Menu</button>
                <ul ng-show="menuState.show">
                    <li ng-repeat="i in [1,2,5,6]"  > {{i}}</li>
                </ul>

                <ul ng-hide="menuState.show">
                    <li ng-repeat="i in [7,8,9,10]" ng-bind="i"></li>
                </ul>
            </div>
        </div>
        <div class="panel-footer">this is footer</div>
    </div>

　　ng-view：绑定视图、用于和$routeProvider联合使用

　　

<div ng-app="userInfoModel">
    <!--ng-view、$routeProvider-->
    <div ng-view></div>

html Code

var userInfoModel = angular.module('userInfoModel', ['ngRoute']); //,'ngAnimate'

userInfoModel.controller('UserInfoCtrl', ['$scope', function ($scope) {
    $scope.userInfo = {
        email: '389398613@qq.com',
        password: '123456789',
        isAutoLogin: true
    }
}]);

userInfoModel.controller('ToggleMenuCtrl', ['$scope', function ($scope) {
    $scope.menuState = { show: false };
    $scope.toggleMenu = function () {
        $scope.menuState.show = !$scope.menuState.show;
    }
}]);

userInfoModel.controller('NgClassCtrl', ['$scope', function ($scope) {
    $scope.isBtn = true;
    $scope.isBtnDefault = true;
    $scope.BtnDefault = 'btn-default';
}]);

//userInfoModel.config(function ($routeProvider) {
//    $routeProvider
//         .when('/Angular/DoubleDataBind/hello', {
//             templateUrl: '/Angular/Hello.cshtml',
//             controller: 'ToggleMenuCtrl'
//         })
//       .when('/Angular/DoubleDataBind/list', {
//           templateUrl: '/Angular/DoubleDataBind/List',
//           controller: 'NgClassCtrl'
//       })
//        .otherWise('/Angular/DoubleDataBind/hello');
//});

userInfoModel.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    //.when('/', { template: '这是首页页面' })
    .when('/computers', { template: '这是电脑分类页面' })
    .when('/printers', { template: '这是打印机页面' })
    .when('/hello', {
        templateUrl: '/Angular/Hello',
            controller: 'ToggleMenuCtrl'
    })
    .when('/list', {
        templateUrl: '/Angular/List',
        controller: 'NgClassCtrl'
    })
    .otherwise({ redirectTo: '/' });
}]);
console.log('1113');

js Code

　　ng-Animate:引入动画

BootStrap:

　　panel

　　panel-primary

　　panel-heading

　　panel-title

　　panel-body

　　panel-footer

　　form-horizontal

　　form-group

 

参考网站：

angular api

https://docs.angularjs.org/api

css参考手册

http://css.doyoe.com/

bootstrap中文api

http://www.bootcss.com/

www.w3schools.com

http://www.w3schools.com/angular/angular_intro.asp

http://css.doyoe.com/