使用动态添加HTML元素$范围变量

下面请看看我的代码，并帮助我纠正添加动态IDS我在做什么错：

$scope.more_work_counter=0; 
$scope.appendWork = function(){ 
    $scope.more_work=$sce.trustAsHtml($scope.more_work+'<input type="text" class="form-control more-work-fields" id="{{more_work_counter}}"><button class="btn btn-danger del-more-work-btn">-</button>'+'</br>'); 
    $scope.more_work_counter++; 
}

下面是我的DOM与标识我想沿着图像在输入字段添加：

来源

2016-03-08 shujaat1989

什么是你想在你的HTML实现？ – shershen

我不确定你想要实现什么，但这肯定是错误的。 HTML代码应该在模板中。它应该通过指令（ng-repeat等）生成，并根据模型中的更改自行更新。该模型应该只是JavaScript对象和数组。 –

我试图添加html元素（输入和按钮）动态时，按下某个按钮。并希望分配这些输入和按钮一些动态ID基于其中有多少生成 – shujaat1989

根据您的示例代码判断，您可能需要添加更多字段以显示在您的html中。您可以使用NG-重复指令，检查this plunk我做了

控制器代码：

$scope.fields = [ 
    {id: 1} 
    ]; 

    $scope.addField = function(){ 
     $scope.fields.push({ 
     id : $scope.fields.length 
     }); 
    }

HTML

<div ng-repeat="field in fields"> 
    <input type="text" class="form-control more-work-fields" id="{{$index}}"> 
    <button class="btn btn-danger del-more-work-btn">-</button> 
</div> 
<button ng-click="addField()">add field</button>

来源

2016-03-08 19:48:15 shershen

感谢您的帮助，我想你想念我的问题。我想添加新的字段，每当用户按下“添加”按钮，所以ng-repeat不会在这个问题:) – shujaat1989

hmmm，“添加新字段，每当用户按下”添加“按钮” - 这正是发生在演示中。不过由你决定 – shershen

@ shujaat1989这就是这个例子。当你点击“添加字段”时，模型中会添加一个新字段，并且由于html模板在字段上迭代并使用ng-repeat为每个字段生成一个输入和一个按钮，所以它确实实现了您想要实现的功能。 –

-1

好，我这样做，它的工作......在PHP中使用旧的技术，因此多次

$scope.appendWork = function(){ 

     $scope.more_work=$sce.trustAsHtml($scope.more_work+'<input type="text" class="form-control more-work-fields" id="'+$scope.more_work_counter+'"><button class="btn btn-danger del-more-work-btn">-</button>'+'</br>'); 
     $scope.more_work_counter++; 

    }

来源

2016-03-08 19:45:35 shujaat1989

使用动态添加HTML元素$范围变量

回答

相关问题