在動態添加的html元素中使用$ scope變量添加動態ID

Question

請在下面查看我的代碼，並幫助我糾正我在做錯的事情：

$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的圖像以及要在輸入字段中添加的ID：

Answer 1

從示例代碼來看，您可能想要添加更多字段以顯示在html中。 您可以使用NG-重復指令，檢查該普拉克我做

控制器代碼：

  $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>

Answer 2

好吧，我做到了，它奏效了... 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++;

    }