如何在 Angulas JS 中創建按鈕並在 HTML 頁面中使用 ng-repeat 顯示它們

Question

我的項目中有一個要求，用戶可以使用模態提供一些信息，例如一些名稱和 URI。 他們可以選擇輸入任意數量的名稱和 URI，每個名稱和 URI 都會顯示在前端表中，並且這些信息中的每一個都有一個修改和刪除按鈕，他們可以使用它來修改或刪除每個提供的條目分別。 我正在從模式中捕獲 URI 和名稱並將它們寫入一個數組，然后在 HTML 中的數組中循環以顯示每個元素，這些元素現在工作正常。 我現在想創建 2 個按鈕以顯示在文本旁邊，以便單擊它們可以修改和刪除，但我無法從 AngularjS 創建按鈕。 我之前使用 Jquery 創建了這些按鈕，但現在知道為什么它在 AngularJS 中不起作用。

AngularjS ：

$scope.ExtensionList    =   [{}];
$scope.ExtensionVlaues  =   0;

$scope.AddNewExtension  =   function(){
    var ExtensionText           =   $scope.AddExtensionForm.AddExtensionNamespaceURI+':'+$scope.AddExtensionForm.AddExtensionLocalName;
    var     DeleteOption        =   angular.element('<button title="Delete Extension" type="button" value="Delete_Extension" name="DUMMY" class="btn btn-info btn-xs edit_data" id="' + $scope.ExtensionVlaues + '"><span class="fa fa-pencil-square-o fa-xs" aria-hidden="true"></span></button>');
    $scope.ExtensionList.push({ExtensionText: ExtensionText, DeleteOption: DeleteOption});
}

HTML Page ：

<tr ng-repeat="extension in ExtensionList" ng-show="ShowExtensionList">
    <td class="form-inline">
        <span>
            {{ extension.ExtensionText }}
        </span>
        
        <span>
            {{ extension.DeleteOption }}
        </span>
    </td>
</tr>

當我嘗試這個時，我得到以下 output ：（AD:F 由上面的 ExtensionText 創建） AD:F{"0":{},"length":1}

Answer 1

經過一番思考，我自己在這里發布了答案，以防萬一有人遇到類似問題：

而不是在 AngularJS 側創建按鈕，而是使用循環在 HTML 本身中創建並為其分配不同的 ID。 這樣，將為每個條目創建按鈕，但 ID 會不同。

AngularJS ；

//On submission of the Add new extension MODAL create the extension
$scope.AddNewExtension  =   function(){
    var ExtensionText           =   $scope.AddExtensionForm.AddExtensionNamespaceURI+':'+$scope.AddExtensionForm.AddExtensionLocalName;
    var DataForm                =   $scope.AddExtensionForm.AddExtensionXMLElement;
    $scope.ExtensionList.push({ExtensionText: ExtensionText, ExtensionVlaues: $scope.ExtensionVlaues});
    $scope.ExtensionVlaues      =   $scope.ExtensionVlaues + 1;
}

HTML ：

<tr ng-repeat="extension in ExtensionList" ng-show="ShowExtensionList">
    <td class="form-inline">
        <span>
            {{ extension.ExtensionText }}
        </span>&ensp;
        
        <span>
            <button title="Delete Extension" type="button" value="Delete_Extension" name="Delete_Extension" id="{{ extension.ExtensionVlaues }}"><span class="fa fa-trash-o" aria-hidden="true" ng-click="Delete_Extension(extension.ExtensionVlaues)"></span></button>
        </span>&ensp;
        
        <span>
            <button title="Edit Extension" type="button" value="Edit_Extension" name="Edit_Extension" id="{{ extension.ExtensionVlaues }}"><span class="fa fa-pencil" aria-hidden="true"></span></button>
        </span>
    </td>
</tr>