使用動態添加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元素$範圍變量

回答

相關問題