Show button in list - AngularJS

Question

I'm new to AngularJS and have recently begun experimenting with creating tables and the ng-repeat functionality. I had an idea to write a JS object where every object has a respective name and a HTML button element associated with it. I'm able to create the list of objects without a problem, but the issue I'm running into is how to display the information; specifically, how to display each object's button element.

Below is the code I have for displaying each object in a list:

<!DOCTYPE html>
<html>
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="x in names">
        {{x.name + ', ' + x.button}}
    </li>
</ul>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.names = [{name:'Mike',button:document.createElement('button')}]
});
</script>

</body> 
</html>

Currently my results look like:

And what I would like to see is:

WilsonPena · Accepted Answer · 2017-12-11 19:49:53Z

2

You should create the button with the html tag. Like this:

<div ng-app="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="x in names">
        {{x.name}}
        <button ng-click="...">{{x.button}}</button>
    </li>
</ul>
</div>

Its the standard way to do it with AngularJS and will give you more freedom to use ng directives and all.

answered Dec 11, 2017 at 19:49

WilsonPena

1,5912 gold badges23 silver badges39 bronze badges

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

Comments

charlietfl · Accepted Answer · 2017-12-11 19:48:58Z

1

No idea what you want to create an element. Just use text for the property value and add appropriate markup in the template.

Use components or directives for any dom methods. They don't belong in controllers

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.names = [{name:'Mike',button:'Button name'}]
});

<!DOCTYPE html>
<html>
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="x in names">
        {{x.name}}<button>{{x.button}}</button>
    </li>
</ul>
</div>

<script>

</script>

</body> 
</html>

answered Dec 11, 2017 at 19:48

charlietfl

172k14 gold badges125 silver badges154 bronze badges

2 Comments

Delfino Over a year ago

You say that DOM methods don't belong in controllers. Why is that?

charlietfl Over a year ago

Because controllers shouldn't know anything about the view structure. They are for managing the model for the view.

Collectives™ on Stack Overflow

Show button in list - AngularJS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related