標籤：post data rip 資料 ons word error color value
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);
Angular 1.63 雙向資料繫結 通過 $http 發送資料
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
