angular学习笔记

最新推荐文章于 2023-03-19 12:57:20 发布

原创最新推荐文章于 2023-03-19 12:57:20 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular

angular 专栏收录该内容

3 篇文章

订阅专栏

数据绑定：

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

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

从视图到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',[]);
    App.controller('mycontroller',['$scope',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值