AngularJs 数据绑定

来源：互联网发布：vb.net如何连接数据库编辑：程序博客网时间：2024/05/16 12:28
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><!--AngularJS是以数据做为驱动的MVC框架，所有模型（Model）里的数据经由控制器（Controller）展示到视图（View）中。 所谓数据绑定指的就是将模型（Model）中的数据与相应的视图（View）进行关联，分为单向绑定和双向绑定两种方式。指定模块  一个页可以有多个模块，但是不能互想嵌套  一般只会有一个 --><body ng-app="dome"><!-- 指定控制器 --><ul ng-controller="DemoController"><li>{{name}}</li><li ng-bind="country"></li> <li ng-bind-template="{{name}}-{{nickname}}-{{country}}"></li><li><img ng-src="{{path}}" alt="X头像奥"></li></ul><hr /><!--数据遍历--><table ng-controller="DemoController"><tr ng-repeat="(key,star) in stars"> <!--不需要索引 可以 star in stars--><td>{{key+1}}: {{star.name}}</td><td>{{star.sex}}</td><td>{{star.age}}</td></tr></table><hr /><!-- 要实现数据从视图向模型传递需要借助于表单元素 --><div ng-controller="DemoController">        <input type="text" ng-model="msg"> <!--向模型传递数据-->        <h4>{{msg}}</h4>        <button ng-click="show()">显示</button>    </div>        <hr /><!--点击事件--><div ng-controller="DemoController"><ul><li><button ng-click="single()">单击</button></li><li><button ng-dblclick="double()">双击</button></li><li><input type="text" ng-blur="blur()"></li><li ng-mouseout="mouseout()">一些内容</li></ul></div><hr /><!--数据筛选--><div ng-controller="DemoController"><ul><li ng-repeat="item in items" ng-switch="item"><span ng-switch-when="css">{{item}}</span></li></ul></div><script src="../libs/angular.min.js"></script><script>// 定义一个模块 App就是新创建的模块，这个模块又是一个对象// 在此对象下又有N多方法，可以实现具体业务逻辑var App = angular.module('dome',[]);// 定义控制器 :名为DemoControllerApp.controller('DemoController',['$scope',function($scope){$scope.name = '张飞';$scope.country = '蜀国';$scope.nickname = '张翼德';  $scope.headImg = './headImg.png';$scope.stars = [{name: '刘德华', sex: '男', age: 62},{name: '王力宏', sex: '男', age: 40},{name: '周杰伦', sex: '男', age: 39},{name: '李玲玉', sex: '女', age: 12}];            $scope.show = function () {                alert($scope.msg);            }                        $scope.single = function () {alert('我被单击了');}$scope.double = function () {alert('我被双击了');}$scope.blur = function () {alert('失去焦点了');}$scope.mouseout = function () {alert('鼠标移出了');}$scope.items = ['html', 'css', 'js'];}]);</script></body></html>
0 0