angular学习笔记

发布时间：2020-12-17 10:28:36 所属栏目：安全来源：网络整理

导读：数据绑定：将模型中的数据与相应的视图进行关联，分为单向绑定和双向绑定。模型数据与视图位的关联关系，就是数据绑定从视图到model传数据，只能借助于表单元素 !DOCTYPE htmlhtmlheadmeta charset="utf-8"/headbodydiv ng-app="mytest" form ng-controll

数据绑定：

将模型中的数据与相应的视图进行关联，分为单向绑定和双向绑定。

模型数据与视图位的关联关系，就是数据绑定

从视图到model传数据，只能借助于表单元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<div ng-app="mytest" >
    <form ng-controller="mycontroller">
        <input type="text" ng-model="msg">
        <button ng-click="show()">点击</button>

    </form>
</div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

<script>
    var App = angular.module('mytest',[]);
    App.controller('mycontroller',['$scope',function($scope){
        $scope.msg = 'defaultvalue';
        
        $scope.show = function(){
            alert($scope.msg);
        }
    }]);
</script>
</body>
</html>

<div ng-app="mytest" >
    <form ng-controller="mycontroller" ng-init="msg='dfdf'">
        <input type="text" ng-model="msg" ng-init="msg='dfyyy'">
        <h2 ng-init="msg='dfdwwww'">{{msg}}</h2>

    </form>
</div>

ng-init 初始化model，$scope里的数据（在控制范围内的任何位置初始化都可以，默认取最后初始化的值）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<div ng-app="mytest" >
    <ul ng-controller="mycontroller">
        <li ng-repeat="(key,person) in people" ng-switch on="person.name">
            <span ng-switch-when="sun">{{key}}:{{person.name}}{{person.age}}{{person.sex}}</span>
        </li>
        
    </ul>
</div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

<script>
    var App = angular.module('mytest',function($scope){
        $scope.people = [
            {name:'sun',age:25,sex:'nv'},{name:'bang',age:26,sex:'nan'},{name:'qiang',age:27,sex:'nan'}
        ];
    }]);
</script>
</body>
</html>

 
 ng-switch on= 
 "person.name" =  
 ng-switch 
 = 
 "person.name"  

 
 person.name 相当于switch(name)里的name,ng-switch-when="sun"  相当于 case：XX 里的XX值 

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!