Question

我在JS中编写了一个运行并正常运行以验证密码的函数。然后我在Angular JS中写了一个相同的，并试图重构它，因此它将具有正确的绑定，因此它不起作用。我假设它可以在Angular中执行此操作，但是当我尝试谷歌寻找答案时，它只是带我去StackOverflow讽刺地寻求答案。

由于

这是函数中当前的javascript if / else语句： function passwordValidation（）{

var pwf = document.getElementById("pword1").value;
var pword = document.getElementById("cPassword").value;
var matchCol = "#009900";
var noMatchCol = "#CC0000";
var noBg = "#FFFFFF";
var re = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[\\\+\=\.,\[\]_£|\`¬':\;\~{}<>()#?!\@$\%^&*-]).{8,20}$/;

if (pwf.length < 1){
        cPassword.style.backgroundColor = noBg;
        cPassword.style.borderColor = noBg;
        match = "";
    }else{

    if (pwf == pword){
        match = "Match!";
        cPassword.style.backgroundColor = matchCol;
        cPassword.style.borderColor = matchCol;
    }else if(pword.length < 1){
        cPassword.style.backgroundColor = noBg;
        cPassword.style.borderColor = noBg;
        match = "";
    }
    else {
    match = "No Match!";
        cPassword.style.backgroundColor = noMatchCol;
        cPassword.style.borderColor = noMatchCol;
    }
    document.getElementById("combination").innerHTML = match;

}

尝试了角度代码：没有返回结果

function passwordValidation($scope){

    $scope.password = "",
    $scope.confPassword = "",
    $scope.isThereAMatch = function(){
        if ($scope.password == $scope.confPassword){
            match = "There is a match!" ;
        }

    }
}

Answer 1

等等，不。你有很多问题：

如您所知，IF语句编码 - AngularJS没有区别。
你永远不会改变AngularJS中的DOM。您可以使用设置样式的指令。

在每个控制器中，你应该有一个名为$scope的东西（是的，带有美元符号）。您应该在那里设置所有数据。让我们看一个例子：

//assume this code is inside an ngSubmit/ngClick handler or something like that
if (pwf.length < 1){
    //cPassword.style.backgroundColor = noBg;
    //cPassword.style.borderColor = noBg;
    $scope.passwordColor = noBg;
    match = "";
} else {
    if (pwf == pword){
        match = "Match!";
        //cPassword.style.backgroundColor = matchCol;
        //cPassword.style.borderColor = matchCol;
        $scope.passwordColor = matchCol;
    } else if(pword.length < 1){
        //cPassword.style.backgroundColor = noBg;
        //cPassword.style.borderColor = noBg;
        $scope.passwordColor = noMatchCol;
        match = "";
    } else {
        match = "No Match!";
        //cPassword.style.backgroundColor = noMatchCol;
        //cPassword.style.borderColor = noMatchCol;
        $scope.passwordColor = noMatchCol;
    }
    //document.getElementById("combination").innerHTML = match;
    $scope.combination = match;
}

您必须正确设计模板：

<span id="combination">{{ combination }}</span>
...
<input type="password" id="cPassword" ng-style="{'background-color': passwordColor, 'border-color': passwordColor}" />

您必须学习许多基础知识或AngularJS并更改您的范例：您永远不会更新控制器中的DOM属性/结构，只能在视图中（通过ng-style）或指令（使用jquery / jqlite）。

IF结构与您所知的相同，但更改的对象完全不同：您只需更改$ scope，$ rootScope或调用控制器中的其他服务，并且从不（是的，我再说一遍）使用jquery直接（指令就是这样）。

你如何在角度js函数中编写if语句？

1 个答案: