Javascript AngularJS中的消息更新

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

目前，两个角度函数（登录和注册）仅适用于最后一个用户“Bilbo”

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

对于register函数，它应该不断地检查一个名字是被取的还是免费的，但它只表示最后一个用户Bilbo也是被取的

我不确定for循环和AngularJS的组合有什么错，因为我想让消息对所有用户都起作用

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) {

});

var-app=angular.module（“app”，['ngRoute']）；
app.config（函数（$routeProvider）{
$routeProvider
。当（“/”{
templateUrl:'pages/home.html'，
控制器：“HomeController”
})
.when（“/home”{
templateUrl:'pages/home.html'，
控制器：“HomeController”
})
.when（“/login”{
templateUrl:'pages/login.html'，
控制器：“登录控制器”
})
。当（“/account”{
templateUrl:'pages/account.html'，
控制器：“AccountController”
})
。当（“/未知”{
templateUrl:'pages/unknown.html'，
控制器：“未知控制器”
})
.否则({
重定向到：“/未知”
});
});
app.factory（'userService'，function（））{
返回{
用户：[{
姓名：“约翰”，
密码：“12345”
}, {
姓名：“奥斯汀”，
密码：“实习生”
}, {
姓名：“莎莉”，
密码：“noob”
}, {
名称：“比尔博”，
密码：“巴金斯”
}]
};
});
app.controller（'LoginController'，函数（$scope、$location、userService）{
$scope.credentials={
用户名：“”，
密码：“
};
$scope.credentialsR={
用户名：“”，
密码：“
};
$scope.login=函数（）{
for（var i=0；i

如果在循环中找到用户，则必须立即返回，而不是继续循环

$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";
};

$scope.login=function（）{
for（var i=0；i

---

示例Plunker:

这是因为您在找到匹配名称后没有退出for循环。因此，如果匹配的名称不是最后一个，那么下面的名称将触发错误的行为

您可以使用

return

退出循环，或者使用专用功能更优雅地分隔搜索：

app.factory('userService', function() {
  var users = [{
    name: "John",
    password: "12345"
  }, {
    name: "Austin",
    password: "intern"
  }, {
    name: "Sally",
    password: "noob"
  }, {
    name: "Bilbo",
    password: "Baggins"
  }];
  return {
    users: users,
    findUserByName: function (userName) {
      return users.filter(function (user) {
        return user.name === userName;
      })[0];
    }
  };
});

然后：

$scope.login = function() {
  var user = userService.findUserByName($scope.credentials.username);
  if(user) {
    if(user.password ===  $scope.credentials.password){
      $location.path("/home");
    } else {
      $scope.messageLogin = "Incorrect login details";
    }
  } else {
    $scope.messageLogin = "Username does not exist";
  }
};

$scope.checkName = function() {
  var user = userService.findUserByName($scope.credentials.username);
  if(user) {
    $scope.messageRegister = "Taken";
  } else {
    $scope.messageRegister = "Available";
  }
};

---

啊，德普。哈哈，谢谢！顺便问一下，有没有办法在JS中添加样式，以便随时更新？i、 e.设置为绿色，设置为红色。你可以使用

ng class

来实现这一点，再次检查plunker我已经更新了它。我建议你将这两条消息放在HTML中不同的元素中，每个元素都有自己的样式，并使用映射到布尔值的ngIf指令激活/停用它们。