无法从动态创建的输入框中获取ng-model值

时间:2018-02-21 20:20:18

标签: angularjs

以下是我添加字段的方法。

$scope.addEmailField = function () {   //Function to add new email field.
    if (valid <= 1 && checkToDelete == 0) {
        var mailTxtId = 'mail' + valid;
        var mailModel = 'Contact_Email' + valid;
        var hide = 'hide' + valid;
        hide = false;
        console.log(mailTxtId);
        var emailDiv = angular.element(document.querySelector('#emailDiv'));
        var element = $compile('<div id="' + mailTxtId + '" style="margin-left: -60px; width:200px; margin-top:15px"><input id= "' + mailModel + '" type = "text" class="form-control" ng-model="' + mailModel + '" ng-blur="validateEmailDynamic(' + valid + ')">' +
            '<input id="' + valid + '" class="form-control" style="margin-left: 206px; width:54px; margin-top:-34px" type="button" value="-" ng-click="deleteField(' + valid + ')"><span ng-show ="' + hide + '" style="color:red">' +
            'Invalid email</span></div>')($scope);
        emailDiv.append(element);

        valid = valid + 1;
    }
};

但没有获得ng-model的价值。

1 个答案:

答案 0 :(得分:0)

将输入框存储在指令的模板中。然后添加ng-class来确定它是否应该显示。

app.directive('inputBox', function(){
     template:'<input ng-model="item">'
});

html中的用法:

<div ng-class="{ input-box : triggerInputBox }"></div>

控制器:

$scope.triggerInputBox = true;

这只是实现这一目标的众多方法之一。但是指令对于动态显示模板非常有用。