span not displayed button in li tag being displayed if ng-repeat not used , once use ng-repeat , neither span nor button being displayed. have used ng-repeat numerous times never faced such situation, both span , button elements not displayed if use ng-repeat in li tag.
this index.html file:
<ul id="contactdelete"> <li ng-repeat="contact in $ctrl.contacts"> <span>{{contact.name}}</span> <button ng-click="$ctrl.deletecontact()">delete</button> </li> </ul> this controller.js file
(function() { class contactscomponent { constructor($http) { var result; $http.get("/api/contacts/").success(function(response) { result = response; }); this.contacts = result; } } angular.module('myapp') .component('contacts', { templateurl: 'app/contacts/contacts.html', controller: contactscomponent }); })();
this.contacts empty success callback async , context different constructor, why can't use this directly.
also, should use then function takes 2 functions arguments, 1 success, other error callback.
one way work around making this local variable, using inside callback.
var self = this; $http.get("/api/contacts/").then(function(response){ self.contacts = response; // or response.data, depending of you're receiving. }); or use bind function:
$http.get("/api/contacts/").then(function(response){ this.contacts = response; }.bind(this)); // notice bind here angular provides own bind implementation:
$http.get("/api/contacts/").then(angular.bind(this, function(response){ this.contacts = response; })); additional informations on scope , context:
Comments
Post a Comment