angular 练习

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

导读：!DOCTYPE htmlhtml lang="en" ng-app="todoList"head meta charset="UTF-8" script src="framework/1.3.0.14/angular.js"/script script src="framework/1.3.0.14/angular-route.js"/script script src="framework/1.3.0.14/angular-animate.js"/script scri

<!DOCTYPE html>
<html lang="en" ng-app="todoList">
<head>
    <meta charset="UTF-8">
    <script src="framework/1.3.0.14/angular.js"></script>
    <script src="framework/1.3.0.14/angular-route.js"></script>
    <script src="framework/1.3.0.14/angular-animate.js"></script>
    <script src="js/test.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/services.js"></script>
    <script src="js/directives.js"></script>
    <title>练习</title>
</head>
<body >
<div>
    <div ng-controller="TaskCtrl">
        <input ng-model="task" type="text">
        <span>
            <button ng-click="add()">提交</button>
        </span>

        <div>
            <input ng-model="uname" type="text">

            <div ng-bind="'用户名' + uname"></div>
        </div>
    </div>
    <div ng-controller="loginCtrl">
        <input ng-model="user.name">
        <input ng-model="user.pwd">
        <button ng-click="login()">登录</button>
    </div>
    <div ng-controller="keyvalue">
        <span>{{realname}}</span>
        <span>{{http}}</span>
        <span>{{data.msg}}</span>
        <span>{{userinfo}}</span>
    </div>
    <div ng-controller="FCtrl">
        <input type="text" ng-model="data.msg">
        <h2>{{data.msg}}</h2>
    </div>
    <div ng-controller="SCtrl">
        <input type="text" ng-model="data.msg">
        <h2>{{data.msg}}</h2>
    </div>
    <div ng-controller="repeatCtrl">
        <ul>
            <li ng-repeat="item in list" ng-if="!$last">
                <h4>{{$index + item.address}}</h4>
            </li>
        </ul>
    </div>
    <div ng-controller="httpCtrl">

    </div>
</div>
<div>
    <!--<h4 ng-hide="tasks.length==0">任务列表</h4>-->
    <h4 ng-if="tasks.length>0">任务列表</h4>
    <ul>
        <li ng-repeat="item in tasks track by $index">{{item}}<a ng-click="tasks.splice($index,1)">删除</a></li>
    </ul>
</div>
</body>
</html>

angular.module('todoList',[])
    .controller('TaskCtrl',function($scope){
        $scope.task = "";
        $scope.tasks = [];
        $scope.add=function(){
            $scope.tasks.push($scope.task);
        }
    })
    .controller("loginCtrl",function($scope){
        $scope.user={name:'',pwd:''};
        $scope.login=function(){
            console.log($scope.user);
            if($scope.user.name == "admin")
            {
                console.log("admin login");
            }
        }
    })
    .value('realname','liaojianguo')
    .constant('http','www.baidu.com')
    .factory('Data',function(){
        return {
            msg:'你好啊',setMsg:function(){
                this.msg = '我不好';
            }
        }
    })
    .service('User',function(){
        this.firstname="上官";
        this.lastname="飞燕";
        this.getName=function(){
            return this.firstname + this.lastname;
        }
    })
    .controller("keyvalue",function($scope,realname,http,Data,User){
        $scope.realname=realname;
        $scope.http=http;
        $scope.data = Data;
        $scope.data.setMsg();
        $scope.userinfo = User.getName();
    })
    .controller("FCtrl",Data){
        $scope.data = Data;
    })
    .controller("SCtrl",Data){
        $scope.data = Data;
    })
    .controller('repeatCtrl',function($scope){
        $scope.list=[
            {id:1,address:'莲花小区14栋2层'},{id:2,address:'莲花小区14栋1层'},{id:3,address:'莲花小区14栋3层'},];
    })
    .controller('httpCtrl',$http){
        $http.get('http://www.zyanjing.com/zyanjing/international_brand!getBrandTypeList.shtml?type_value=0')
            .success(function(resp){
                console.log(resp);
            });
    })

（编辑：李大同）

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