javascript - AngularJS 中的消息更新

Question

AngularJS 的新手，在为 for 循环或 Angular 更新消息时遇到问题。

现在这两个 Angular 函数(登录和注册)只对最后一个用户“Bilbo”有效。

1. 对于除最后一个用户 Bilbo 之外的所有用户，如果用户存在但密码不正确，登录函数不会返回适当的消息。

2. 对于注册函数，它应该不断检查一个名字是否已被占用或空闲，但它也只为最后一个用户 Bilbo 说已占用。

不确定我在结合使用 for 循环和 AngularJS 时做错了什么，因为我希望该消息适用于所有用户。

PLUNKER DEMO

JS代码

var app = angular.module("app", ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider

  .when('/', {
    templateUrl: 'pages/home.html',
    controller: 'HomeController'
  })

  .when('/home', {
    templateUrl: 'pages/home.html',
    controller: 'HomeController'
  })

  .when('/login', {
    templateUrl: 'pages/login.html',
    controller: 'LoginController'
  })

  .when('/account', {
    templateUrl: 'pages/account.html',
    controller: 'AccountController'
  })

  .when('/unknown', {
    templateUrl: 'pages/unknown.html',
    controller: 'UnknownController'
  })
    .otherwise({
      redirectTo: '/unknown'
    });
});


app.factory('userService', function() {
  return {
    users: [{
      name: "John",
      password: "12345"
    }, {
      name: "Austin",
      password: "intern"
    }, {
      name: "Sally",
      password: "noob"
    }, {
      name: "Bilbo",
      password: "Baggins"
    }]

  };
});

app.controller('LoginController', function($scope, $location, userService) {
  $scope.credentials = {
    username: "",
    password: ""
  };
  $scope.credentialsR = {
    username: "",
    password: ""
  };

  $scope.login = function() {
    for (var i = 0; i < userService.users.length; i++) {
      if (userService.users[i].name === $scope.credentials.username) {
        if (userService.users[i].password === $scope.credentials.password) {
          $location.path("/home");
        } else {
          $scope.messageLogin = "Incorrect login details";
        }
      } else {
        $scope.messageLogin = "Username does not exist";
      }
    }
  };

  $scope.checkName = function() {
    for (var i = 0; i < userService.users.length; i++) {
      if (userService.users[i].name === $scope.credentialsR.username) {
        $scope.messageRegister = "Taken";
      } else {
        $scope.messageRegister = "Available";
      }
    }
  };
});

app.controller('HomeController', function($scope) {

});

app.controller('AccountController', function($scope, userService) {
  $scope.userList = userService.users;
});

app.controller('UnknownController', function($scope) {

});

Answer 1

如果在循环中发现用户必须立即返回，而不是继续循环。

$scope.login = function() {
  for (var i = 0; i < userService.users.length; i++) {
    if (userService.users[i].name === $scope.credentials.username) {
      if (userService.users[i].password === $scope.credentials.password) {
        $location.path("/home");
      } else {
        $scope.messageLogin = "Incorrect login details";
      }

      return;
    }
  }

  $scope.messageLogin = "Username does not exist";
};

$scope.checkName = function() {
  for (var i = 0; i < userService.users.length; i++) {
    if (userService.users[i].name === $scope.credentialsR.username) {
      $scope.messageRegister = "Taken";
      return;
    }
  }

  $scope.messageRegister = "Available";
};

示例 Plunker: http://plnkr.co/edit/eBGLsBdI89WFhEAxyDgL?p=preview