zoukankan      html  css  js  c++  java
  • Angular 1.63 双向数据绑定 通过 $http 发送数据

    html 部分

    <body ng-app="app">
    <form action="" method="">账号
    <div ng-controller="login">

    <label for=""><input type="text" ng-model="data.name" name="name" id="" value="" /></label>      //  ng-model="data.name"的数据进行绑定绑定
    <br />
    <label for="">密码<input type="text" ng-model="data.password" name="password" id="" value="" /></label>      //  ng-model="data.password"的数据进行绑定绑定
    <br />
    <input type="button" ng-click="login()" value="登录" />          //绑定点击事件login()

    </div>
    </form>
    </body>

    ------------------------------------------

    script部分

    <script type="text/javascript">
    var app = angular.module("app", [])
    app.controller("login", function($scope, $http) {     //注入依赖
    $scope.data = {
    name: "",
    password: ''
    };
    $scope.login = function() {                //创建点击事件发送数据
    console.log($scope.data);
    $http.post("/login", $scope.data)        //post发送数据
    .then(function(result) {}, function(error) {});  //两个回掉函数   一个是成功回调   一个是失败回调

    }

    })
    </script>

    -------------------------------

    总结     双向数据绑定

    1 创建一个 $scope.data  

    2将$scope.data   绑定在相应 input上 使用 ng-model绑定

     angular 传送数据

    1.在controller 注入依赖 $http

    2.创建发送数据的函数

    post方法    $http.post('/someUrl', data, config).then(successCallback, errorCallback);

    post方法   $http.get('/someUrl', config).then(successCallback, errorCallback);

  • 相关阅读:
    TCP/IP讲解
    Android开发的技术层次
    页面右下角弹出类似QQ或MSN的消息提示
    C# winform 自定义鼠标图标
    C#遍历指定文件夹中的所有文件
    C#操作Word
    关于数据绑定的一些小技巧
    Silverlight遍历本地文件夹
    ckeditor+ckfinder+syntaxhighlight实现上传和插入代码高亮(for .NET)
    wpf 动画效果
  • 原文地址:https://www.cnblogs.com/nns4/p/7000318.html
Copyright © 2011-2022 走看看