javascript - can't have 2 ng-click on the same page -
there 2 ng-controller have 1 ng-click each.
if set script 2 ng-click following code, 2 buttons not work. if set script either 1 ng-click, button works.
how can solve it?
<body ng-app="myapp"> <div ng-controller="logincontroller"> <h3>login</h3> <form class="login" role="form"> <div class="form-group"> <label for="email">email:</label> <input type="email" class="form-control" id="email" placeholder="enter email" ng-model="email"> </div> <div class="form-group"> <label for="pwd">password:</label> <input type="password" class="form-control" id="pwd" placeholder="enter password" ng-model="password"> </div> <button type="submit" ng-click="login()" class="btn btn-default">login</button> </form> </div> <div ng-controller="registercontroller"> <h3>register</h3> <form class="register" role="form"> <div class="form-group"> <label for="email">email:</label> <input type="email" class="form-control" id="email" placeholder="enter email" ng-model="emailr"> </div> <div class="form-group"> <label for="pwd">password:</label> <input type="password" class="form-control" id="pwd" placeholder="enter password" ng-model="pwdr"> </div> <div class="form-group"> <label for="name">your name:</label> <input type="text" class="form-control" id="name" placeholder="enter name" ng-model="namer"> </div> <button type="submit" ng-click="register()" class="btn btn-default">register</button> </form> </div> <script> var api = "" angular.module("myapp", []).controller("logincontroller", function($scope, $http) { $scope.login = function(){ if(!isempty($scope.email) || !isempty($scope.password)){ var logininfo = api + "login/" + $scope.email + "/" + $scope.password; var responsepromise = $http.get(logininfo); responsepromise.success(function(data, status, headers, config) { var msg = data.result; alert(msg); top.location.reload(); }); responsepromise.error(function(data, status, headers, config) { alert("ajax fail!"); }); } } }); angular.module("myapp", []).controller("registercontroller", function($scope, $http) { $scope.register = function(){ if(!isempty($scope.emailr) || !isempty($scope.pwdr || !isempty($scope.namer))){ var registerinfo = api + "register/" + $scope.emailr + "/" + $scope.pwdr + "/" + $scope.namer; alert(registerinfo); var responsepromise = $http.get(registerinfo); responsepromise.success(function(data, status, headers, config) { var msg = data.result; alert(msg); }); responsepromise.error(function(data, status, headers, config) { alert("ajax fail!"); }); } } });
since using button type submit different <form> elements can this:
<div ng-controller="logincontroller"> <form name="loginform" data-ng-submit="login()"> <button type="submit">submit form 1</button> </form> </div> <div ng-controller="registercontroller"> <form name="registerform" data-ng-submit="register()"> <button type="submit">submit form 2</button> </form> </div> the ng-submit automatically recognises submit button , can write function in 2 controllers as:
<script> var api = "" angular.module("myapp", []).controller("logincontroller", function($scope, $http) { $scope.login = function(){ if(!isempty($scope.email) || !isempty($scope.password)){ var logininfo = api + "login/" + $scope.email + "/" + $scope.password; var responsepromise = $http.get(logininfo); responsepromise.success(function(data, status, headers, config) { var msg = data.result; alert(msg); top.location.reload(); }); responsepromise.error(function(data, status, headers, config) { alert("ajax fail!"); }); } } }); angular.module("myapp", []).controller("registercontroller", function($scope, $http) { $scope.register = function(){ if(!isempty($scope.emailr) || !isempty($scope.pwdr || !isempty($scope.namer))){ var registerinfo = api + "register/" + $scope.emailr + "/" + $scope.pwdr + "/" + $scope.namer; alert(registerinfo); var responsepromise = $http.get(registerinfo); responsepromise.success(function(data, status, headers, config) { var msg = data.result; alert(msg); }); responsepromise.error(function(data, status, headers, config) { alert("ajax fail!"); }); } } });
Comments
Post a Comment