AngularJs数据绑定

数据的绑定：单项数据绑定和双向数据绑定

1、单项数据绑定（模型到视图）

<body ng-app="app">
     <ul ng-controller="DemoController">
         <li>{{name}}{{age}}</li>
         <li ng-cloak>{{name}}{{age}}</li>
         <li ng-bind="name"></li>
         <li ng-bind-template="{{age}}{{name}}"></li>
     </ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
//    单项数据绑定，$scope-->view
    var app = angular.module("app",[]);
    app.controller("DemoController",['$scope',function ($scope) {
//        $scope就是模型
        $scope.name = "张三";
        $scope.age = 10;
    }])
</script>
</body>

运行结果：

运行结果.png

其中绑定数据有两种方式：“{{}}”双花括弧或者ng-bind两种方式，但是两者的区别在与使用“{{}}”会发生“闪烁”,原因很简单，页面在解析的时候是从上往下执行的，当执行到{{name}}是还没有加载angular js库，所以会发生“闪烁”，当然也有解决这种现象的方法就是在标签中加上ng-cloak指令可以避免“闪烁”；
同时绑定两个数据有两中方式(ng-bind-template)：

         <li ng-cloak>{{name}}{{age}}</li>
         <li ng-bind-template="{{age}}{{name}}"></li>

2、双向数据绑定，用于表单(视图向模型传递数据)

<body ng-app="app">
//视图
<div ng-controller="DemoController">
    <input type="text"  ng-model="msg">
    <h2>小明说：{{msg}}</h2>
</div>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
    //    单项数据绑定，$scope-->view
    var app = angular.module("app",[]);
    app.controller("DemoController",['$scope',function ($scope) {
//        $scope就是模型
        $scope.show =function () {
            alert($scope.msg);
        }
    }])
</script>
</body>

运行结果：

运行结果.png

通过为表单元素添加ng-module指令实现视图向模型数据的绑定。
通过ng-init可以初始化模型：

<div ng-controller="DemoController" >
    <input type="text"  ng-model="msg" ng-init="msg='你饭吃了嘛'">
    <h2>小明说：{{msg}}</h2>
</div>

运行结果：

运行结果.png

这样在页面刚加载完就会默认填充一个数据；
当然除了这些，还有其他的，给按钮绑定单击，双击,鼠标移出事件等等：

<body ng-app="app">
<div ng-controller="DemoController" >
    <!--<input type="text"  ng-model="msg" ng-init="msg='你饭吃了嘛'">-->
    <!--<h2>小明说：{{msg}}</h2>-->
    <button ng-click = "fun1()";>点击我</button>
    <button ng-dblclick = "fun2()";>点击我，我被双击了</button>
</div>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
    //    单项数据绑定，$scope-->view
    var app = angular.module("app",[]);
    app.controller("DemoController",['$scope',function ($scope) {
//        $scope就是模型
        $scope.fun1=function () {
            alert("我被点击了");
        }
        $scope.fun2=function () {
            alert("我被双击了");
        }
    }])
</script>
</body>

单击事件.png

3、循环遍历元素

<body >
<div class="box" ng-app="app">
    <div ng-controller="Democontroller">
        <ul>
            <li ng-repeat="c in course">{{c.name}},{{c.age}}岁</li>
        </ul>
    </div>
</div>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
    var app = angular.module('app',[]);
    app.controller('Democontroller',['$scope',function ($scope) {
        $scope.course =[
            {name:"刘德华",age:30},
            {name:"薛之谦",age:28},
            {name:"范冰冰",age:20}
        ]
    }]);
</script>
</body>

运行结果：

运行结果.png

还可以通过ng-switch-when过滤：

<body >
<div ng-controller="DemoController">
    <ul>
        <li ng-repeat="item in items" ng-switch="item">
            <span ng-switch-when="css">{{item}}</span>
        </li>
    </ul>
</div>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
    var App = angular.module('App', []);
    App.controller('DemoController', ['$scope', function ($scope) {
        $scope.items = ['html', 'css', 'js'];
    }]);
</script>
</body>

运行结果.png

就是说，当items的值为css时才显示出来。