Javascript 根据用户输入动态设置ng模式

我有一个输入框

<input type="text" class="text-primary" ng-pattern="ip_regex or ipv6_regex" name="newIP" ng-model="macbinding.newIP" ng-change="checkDuplicates('newIP')">

但是，如果字符串包含：，我如何根据更改动态地将这些ng模式应用于该输入

例2001:1

如果输入包含：then，我知道它是IPv6，那么我将使用ng pattern=IPv6\u regex

这是我可以在前端HTML上实现的，还是我需要解析输入并在angular controller中执行逻辑

---

我可以用ng if吗

您可以结合使用ng模型来存储和检查用户的输入，并使用超时功能来告诉您何时检查输入。比如说

您的输入标记如下所示

<input id="textBox" ng-model="$ctrl.userInput" value="$ctrl.userInput"/>

我用typescript写的Js，但它应该足够可读，你可以理解要点

userInput: string = '';

//setup before functions
typingTimer: number; //timer identifier

//on keyup, start the countdown
$('#textBox').on('keyup', function () {
    if (typingTimer){
        clearTimeout(typingTimer);
    }

    //if no keyup event is found in 3000ms (3 seconds) execute doneTyping()
    typingTimer = setTimeout(doneTyping, 3000);
});

//user is "finished typing," do something
function doneTyping() {
    //check for ':'
    var foundSemiColon: boolean = false;
    //for every character in, userInput see if that character's code value equals 58. 
    //58 is the ASCII representation of a semi-colon
    for (var i: number = 0; i < userInput.length; i++) {
        if (userInput.charCodeAt(i) === 58) {
            //Semi-colon found use IPv6
            break;
        }
    }

    //if foundSemiColon === false you didn't find a semi-colon
    if (!foundSemiColon) {
        //use IPv4
    }

    //Now that you're done and know what to use, clear your timeOut event
    clearTimeout(typingTimer);
}

可能重复的

userInput: string = '';

//setup before functions
typingTimer: number; //timer identifier

//on keyup, start the countdown
$('#textBox').on('keyup', function () {
    if (typingTimer){
        clearTimeout(typingTimer);
    }

    //if no keyup event is found in 3000ms (3 seconds) execute doneTyping()
    typingTimer = setTimeout(doneTyping, 3000);
});

//user is "finished typing," do something
function doneTyping() {
    //check for ':'
    var foundSemiColon: boolean = false;
    //for every character in, userInput see if that character's code value equals 58. 
    //58 is the ASCII representation of a semi-colon
    for (var i: number = 0; i < userInput.length; i++) {
        if (userInput.charCodeAt(i) === 58) {
            //Semi-colon found use IPv6
            break;
        }
    }

    //if foundSemiColon === false you didn't find a semi-colon
    if (!foundSemiColon) {
        //use IPv4
    }

    //Now that you're done and know what to use, clear your timeOut event
    clearTimeout(typingTimer);
}