angularjs - Getting ng-class to work for dynamically created elements -
i making application dynamically creates bunch of labels. each 1 needs ng-class parameter angular doesn't see newly created elements , ignored. http://jsfiddle.net/vdkuqhg7/
var myel = angular.element( document.queryselector( '#box' ) ); var div = angular.element('<div ng-class=\"{\'red\' : areastatus, \'green\' : !areastatus}\">this more text</div>'); myel.append(div);
how recognize newly created elements?
this how perform task have presented; utilizes angular features differently. understand doesn't use angular.element
question does, more flexible. here relevant code:
mymodule.controller('mycontroller', function ($scope) { $scope.areastatus = false; $scope.dynamicdata = []; $scope.insertdiv=function(message) { if (message) { $scope.dynamicdata.push({value : message}) } else{ $scope.dynamicdata.push({value: "this more text"}); } }
and html:
<div ng-controller="mycontroller" id="box"> <button ng-click="areastatus = !areastatus">toggle</button> <div ng-class="{'red' : areastatus, 'green' : !areastatus}"> text </div> <button ng-click="insertdiv()">insert</button> <button ng-click="insertdiv('this different message')">insert different message</button> <div ng-repeat="data in dynamicdata" ng-class="{'red' : areastatus, 'green' : !areastatus}"> {{data.value}} </div>
Comments
Post a Comment