How to create button in Angulas JS and display them using ng-repeat in the HTML page

Question

I have a requirement in my project where the user can provide some information such as maybe some name and URI using the modal. They have the option to enter as much name and URI as they want and each would be displayed in the front-end table and each of these information will have a modify and delete button which they can use to modify or delete each of the provided entries individually. I am capturing the URI and name from the modal and writing them into an array and then looping through the array in HTML to display each element which is as of now working fine. I want to now create 2 buttons for showing next to the text so that on click they can modify and delete but I am unable to create the button from AngularjS. I have previously created these buttons using the Jquery but now sure why its not working in 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>

I am getting the following output when I tried this: (AD:F is created by the ExtensionText from above) AD:F{"0":{},"length":1}

score 0 · Answer 1 · answered Jul 01 '20 at 07:48

After a little bit of thinking I got the answer myself posting here just in case anyone faces similar issues:

Rather than creating the buttons in the AngularJS side create in the HTML itself using the loop and assign the different id to it. In this way button would be created for each entry but the ID would be different.

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>

How to create button in Angulas JS and display them using ng-repeat in the HTML page

1 Answers1