如果所有其他元素都已填写,如何动态添加新的输入元素 AngularJS
How dynamically add new input element if all others was filled in AngularJS
请看这个Plunker
所以我使用 angular 并需要在填写所有其他字段时添加新的输入字段(默认情况下在页面上放置 5 个输入,如果所有输入都已填写,则在新输入时自动添加一个输入还使用将添加一个输入等)。
为了生成输入,我使用 ng-repeat 和 name_list[]:
<div collect-input>
<div class="form-group" ng-repeat="(i, name) in name_list track by $index">
<div class="row">
<div class="col-xs-12">
<input class="form-control" type="text" ng-model="data.name_list[i]" add-input/>
</div>
</div>
</div>
每个输入都有指令 attr "add-input",里面有 $watch() 方法。此方法跟踪 $isEmpty 参数何时更改。
然后value函数将这个参数的值传给listen函数。
directive('addInput', ['$compile', '$sce', '$timeout', function ($compile, $sce, $timeout) {
return {
restrict: 'A',
require: ['^collectInput', '?ngModel'],
link: function (scope, element, attrs, ctrl) {
var collectInput = ctrl[0];
var ngModel = ctrl[1];
$timeout(function(){
scope.$watch(
function(){
return ngModel.$isEmpty(ngModel.$modelValue);
},
function(isEmpty){
collectInput.reportInput(ngModel, isEmpty);
}
);
},1000)
}
}
}]);
然后这个函数调用 "reportInput()" 放置在父指令 "collect-input" 中。此函数的主要目标是向 name_list[] 添加新的输入名称,以便通过 ng-repeat
生成
userApp.directive('collectInput', function() {
return {
restrict: 'A',
controller: function($scope) {
var dirtyCount = 0;
this.reportInput = function(modelValue, isEmpty) {
var count = $scope.name_list.length;
if (isEmpty == false){
dirtyCount ++;
console.log('+1:' + dirtyCount);
}
if (isEmpty == true){
if (dirtyCount <= 0){
dirtyCount = 0;
console.log('0:' + dirtyCount);
}
else if(dirtyCount > 0){
dirtyCount --;
console.log('-1:' + dirtyCount)
}
}
if (count === dirtyCount) {
$scope.name_list.push(modelValue);
//dirtyCount = dirtyCount + 1;
}
console.log('count:' + count);
console.log('dirtyCount:' + dirtyCount);
console.log(modelValue)
}
},
link: function(scope, element, attrs) {
}}});
因此,当我填充 5 个默认输入时,在出现新输入后一切都很好,但它都在我的 IDE 中,如果我只为 5+ 标签添加一个符号(由于某种原因在 plunker 中),它工作完美它不起作用)但是当我添加或删除更多代码逻辑崩溃时。很难解释。我希望 Plunker 代码能更清楚地说明这一点。
未经测试,可以优化,但这是我的想法:
HTML :
<div class="form-group" ng-repeat="name in name_list">
<div class="row">
<div class="col-xs-12">
<input class="form-control" ng-model="name"/>
</div>
</div>
</div>
JS :
//watch any modification in the list of names
$scope.$watchCollection('data.name_list', function (list) {
//is there an empty name in the list?
if (!list.filter(function (name) { return !name; }).length) {
//if not, let's add one.
data.name_list.push('');
//and that will automatically add an input to the html
}
});
我不明白指令的意义。
请看这个Plunker
所以我使用 angular 并需要在填写所有其他字段时添加新的输入字段(默认情况下在页面上放置 5 个输入,如果所有输入都已填写,则在新输入时自动添加一个输入还使用将添加一个输入等)。
为了生成输入,我使用 ng-repeat 和 name_list[]:
<div collect-input>
<div class="form-group" ng-repeat="(i, name) in name_list track by $index">
<div class="row">
<div class="col-xs-12">
<input class="form-control" type="text" ng-model="data.name_list[i]" add-input/>
</div>
</div>
</div>
每个输入都有指令 attr "add-input",里面有 $watch() 方法。此方法跟踪 $isEmpty 参数何时更改。 然后value函数将这个参数的值传给listen函数。
directive('addInput', ['$compile', '$sce', '$timeout', function ($compile, $sce, $timeout) {
return {
restrict: 'A',
require: ['^collectInput', '?ngModel'],
link: function (scope, element, attrs, ctrl) {
var collectInput = ctrl[0];
var ngModel = ctrl[1];
$timeout(function(){
scope.$watch(
function(){
return ngModel.$isEmpty(ngModel.$modelValue);
},
function(isEmpty){
collectInput.reportInput(ngModel, isEmpty);
}
);
},1000)
}
}
}]);
然后这个函数调用 "reportInput()" 放置在父指令 "collect-input" 中。此函数的主要目标是向 name_list[] 添加新的输入名称,以便通过 ng-repeat
生成userApp.directive('collectInput', function() {
return {
restrict: 'A',
controller: function($scope) {
var dirtyCount = 0;
this.reportInput = function(modelValue, isEmpty) {
var count = $scope.name_list.length;
if (isEmpty == false){
dirtyCount ++;
console.log('+1:' + dirtyCount);
}
if (isEmpty == true){
if (dirtyCount <= 0){
dirtyCount = 0;
console.log('0:' + dirtyCount);
}
else if(dirtyCount > 0){
dirtyCount --;
console.log('-1:' + dirtyCount)
}
}
if (count === dirtyCount) {
$scope.name_list.push(modelValue);
//dirtyCount = dirtyCount + 1;
}
console.log('count:' + count);
console.log('dirtyCount:' + dirtyCount);
console.log(modelValue)
}
},
link: function(scope, element, attrs) {
}}});
因此,当我填充 5 个默认输入时,在出现新输入后一切都很好,但它都在我的 IDE 中,如果我只为 5+ 标签添加一个符号(由于某种原因在 plunker 中),它工作完美它不起作用)但是当我添加或删除更多代码逻辑崩溃时。很难解释。我希望 Plunker 代码能更清楚地说明这一点。
未经测试,可以优化,但这是我的想法:
HTML :
<div class="form-group" ng-repeat="name in name_list">
<div class="row">
<div class="col-xs-12">
<input class="form-control" ng-model="name"/>
</div>
</div>
</div>
JS :
//watch any modification in the list of names
$scope.$watchCollection('data.name_list', function (list) {
//is there an empty name in the list?
if (!list.filter(function (name) { return !name; }).length) {
//if not, let's add one.
data.name_list.push('');
//and that will automatically add an input to the html
}
});
我不明白指令的意义。