Question

我有两个用户名和密码的文本框，当每个用户输入数据时，它应该发送给api。我怎样才能使它发挥作用。

           <label class="item item-input">
         <span class="input-label">Username</span>
         <input type="text" ng-model="loginData.username">
          </label>
        <label class="item item-input">
           <span class="input-label">Password</span>
          <input type="password" ng-model="loginData.password">
        </label>
          <p style="text-align:center"ng-hide=myflag>wrong credentials</P>
         <label class="item">
         <button class="button button-block button-positive" type="submit">Log in</button>
    </label>

Answer 1

您应该阅读表格的角度文档。 https://docs.angularjs.org/guide/forms

以下是模板+控制器的快速示例。

HTML

<form action="submitLogin()">
    <label class="item item-input">
         <span class="input-label">Username</span>
         <input type="text" ng-model="loginData.username">
          </label>
        <label class="item item-input">
           <span class="input-label">Password</span>
          <input type="password" ng-model="loginData.password">
        </label>
          <p style="text-align:center"ng-hide=myflag>wrong credentials</P>
         <label class="item">
         <button class="button button-block button-positive" type="submit">Log in</button>
    </label>
</form>

控制器

var example_app = angular.module("example_app ", []);

example_app.controller("LoginController", ['$scope', '$http', function($scope, $http) {
    $scope.loginData = {};
    $scope.submitLogin= function(){ 
        var res = $http.post('http://login.com/postLogin', loginData);
        res.success(function(data, status, headers, config) {
            $scope.message = data;
            // go to authorized page
        });
        res.error(function(data, status, headers, config) {
            alert( "failure message: " + JSON.stringify({data: data}));
        });     

    };
}]);

文档未显示action =功能，但显示了对提交按钮的ng-click。两者都很好。

编辑：要提及，但忘了，你应该尝试使用角度服务，而不是直接在你的控制器中使用$ http。

https://docs.angularjs.org/guide/services

https://github.com/johnpapa/angular-styleguide

如何让Ionic app用户登录？

1 个答案: