Dynamically Creating HTML Buttons from Angular

Question

I've done some research but I can't find any tutorials or examples. So I thought I would put this out there for someone to answer.

I am trying to create buttons in angular to show up in html. I don't have much code, but here's what I have:

angular.module('starter.controllers', ['ionic'])

.controller('HomeCtrl', function($ionicPopup, $scope) {
  }

<ion-content ng-controller="HomeCtrl">
			<div id="createdBtns" style="margin: 20px">
				<button class="button button-block">Groups</button>
			</div>
			<button id="staticBtn" class="button button-float" ng-click="addContact()">
				<i class="icon ion-plus"></i>
			</button>
		</ion-content>

That button won't be there inside the first div. It is just an example of what I want, but created dynamically in angular I need to create buttons within the HomeCtrl. Can anyone help me out with this?

What I am trying to do:

I will be asking a user for their name. Once I get it, I will create a button on the screen with their name on it. Like this:

.controller('HomeCtrl', function($ionicPopup, $scope) {
	$scope.addContact = function() {
		$ionicPopup.confirm({
			title: 'Import?',
			template: 'Would you like to import a contact from your current contacts?',
			cancelText: 'No',
		    okText: 'Yes'
		}).then(function(res) {
			if (res) {
				navigator.contacts.pickContact(function(contact) {
					 alert('The following contact has been selected:' + JSON.stringify(contact));
				})

So then I will create a button with their contact information on it.

Created dynamically based on what data and criteria? Not at all clear what you are asking — charlietfl
– charlietfl, Commented Sep 30, 2016 at 14:16
why do you need to add that dynamically, you can use ng-hide, ng-show, ng-if if you want to conditionally hide/show/render the button in DOM — Aks1357
– Aks1357, Commented Sep 30, 2016 at 14:16
The question needs more details, the only idea that comes to my mind, is adding an ng-repeat and an object in the controller side with the name or any other attribute for the button, but what is the purpose of that? — Alexander P.
– Alexander P., Commented Sep 30, 2016 at 14:18
I just need to be able to create buttons without adding code to html each time. Meaning, when a user creates an object inside the app, it will then create a button with the information they provided. If that is not dynamic i am sorry for my misunderstanding — Austin Hunter
– Austin Hunter, Commented Sep 30, 2016 at 14:19

devqon · Accepted Answer · 2016-09-30 14:26:59Z

2

This sounds like the basic angular functionality. You first have to define some $scope data:

.controller('HomeCtrl', function($ionicPopup, $scope) {
    // or whatever information your contacts have
    $scope.contacts = [];

    // the code that picks a contact
    //..
    navigator.contacts.pickContact(function(contact) {
        $scope.contacts.push(contact);
    })

    $scope.doSomethingWithContact = function(contact) {
        console.log(contact);
    }
}

Then in your html something like:

<button class="button button-block"
        ng-repeat="contact in contacts"
        ng-click="doSomethingWithContact(contact)">
    {{ contact.displayName }} (phone: {{ contact.phoneNumbers[0] }})
</button>

edited Sep 30, 2016 at 14:26

answered Sep 30, 2016 at 14:21

devqon

14k2 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Austin Hunter Over a year ago

Ok, I did exactly like you did. Because its perfect. But for some reason the button isn't showing up. I don't know whats wrong. Any help?

devqon Over a year ago

Have you verified that the contact actually gets added to the $scope.contacts?

Austin Hunter Over a year ago

Yes. I console.log($scope.contacts) after pushing contact onto it. and I get, [object Object]

devqon Over a year ago

You might need to trigger an angular digest cycle, because the navigator object isn't angular's: $scope.$apply(function(){ $scope.contacts.push(contact); });

Austin Hunter Over a year ago

That fixed it. Thanks. Working now!

Nikolai · Accepted Answer · 2016-09-30 14:23:34Z

1

In the controller's code you would need to create a collection of buttons and assign it to scope. Then in your HTML use ngRepeat directive to iterate through that collection and create required buttons. See below code for an example

https://run.plnkr.co/plunks/jASWuwDMX0ojIj3XLZMX/

answered Sep 30, 2016 at 14:23

Nikolai

3182 silver badges15 bronze badges

Collectives™ on Stack Overflow

Dynamically Creating HTML Buttons from Angular

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related