Angularjs 学习笔记-2017-02-06-双向数据绑定
2017-02-06 18:21
846 查看
NG:
ng-bind: 标签属性 ng-bind=" obj.xxx " ,不会出现
[b] 用于区别{{ }} 标签,当页面未加载完毕时可以看到{{}}标签,非常不雅观,ng-bind可以解决这个问题, 为了方便性,一般ng-bind用在首页,其他子模板可以使用{{}}[/b]
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/
ng-bind: 标签属性 ng-bind=" obj.xxx " ,不会出现
[b] 用于区别{{ }} 标签,当页面未加载完毕时可以看到{{}}标签,非常不雅观,ng-bind可以解决这个问题, 为了方便性,一般ng-bind用在首页,其他子模板可以使用{{}}[/b]
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/
相关文章推荐
- JS学习笔记——AngularJS 1.x双向数据绑定机制
- angularjs学习笔记之双向数据绑定
- angularjs学习笔记之双向数据绑定
- 深入学习AngularJS中数据的双向绑定机制
- android 数据双向绑定学习笔记
- AngularJs学习记录--双向数据绑定的HelloWorld!
- AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4
- 深入学习AngularJS中数据的双向绑定机制
- 双向数据绑定---AngularJS的基本原理学习
- Vue.js第一天学习笔记(数据的双向绑定、常用指令)
- 双向数据绑定---AngularJS的基本原理学习
- angular学习的一些小笔记(中)之双向数据绑定
- angularjs中$http、$location、$watch及双向数据绑定学习实现简单登陆验证
- angularjs中$http、$location、$watch及双向数据绑定学习实现简单登陆验证
- 双向数据绑定---AngularJS的基本原理学习
- 我的angularjs源码学习之旅3——脏检测与数据双向绑定
- Angularjs进阶笔记(1)不同类型的双向数据绑定
- 【学习笔记】Vue中实现双向数据绑定的原理
- Vue.js第一天学习笔记(数据的双向绑定、常用指令)