I am trying to create some dynamic html elements in angular based on values I have stored in a SQL database. This is a prize selection application for work where I have 5 prizes which have descriptions associated and each description has a type (span, p, div, h1, etc). So based on what our DB says the line should be i want the html to create itself. The way the data is laid out is I have a data object that has an array of pictures and each picture object has an array of description objects { Pictures[ Descriptions[] ] }
"Pictures":[{"ID":9,"IDName":"messengerBag","Descriptions":[{"ID":7,"Text":"Messenger bag is a perfect size for most 15” laptops. The 10th anniversary logo is beautifully displayed in full detail on the front pocket.","DescriptionType":"h3"},{"ID":8,"Text":"Zippered main compartment includes a padded laptop sleeve.","DescriptionType":"p"},{"ID":9,"Text":"Velcro front pocket with organization panel.","DescriptionType":"p"}, {"ID":10,"Text":"Pen loop and side mesh pocket.","DescriptionType":"p"},{"ID":11,"Text":"Adjustable shoulder strap and two carry handles.","DescriptionType":"ul"},...
I have tried using the values directly and it did not work:
<div ng-repeat="pic2 in vm.data.Pictures" ng-show="{{$index}} == vm.index">
<{{desc.DescriptionType}} ng-repeat="desc in pic2.Descriptions">{{desc.Text}}</{{desc.DescriptionType}}>
</div>
I then decided to try a directive. I could get it to return the text but never the element with the description type i was hoping for.
.directive("dynamicelement", ['$compile', function ($compile) {
return {
restrict: "E",
scope: { desc: '#' },
template: '<' + '{{header}}' + '>' + '{{header2}}' + '</' + '{{header}}' + '>',
controller: function ($scope) {
$scope.header = "p";
$scope.header2 = "hi";
}
}
};
I have read article where they talked about using $compile and needing a link function in my directive but i'm not really sure how to use those.
I also have an example of using ngSwitch from How can I use Angular to output dynamic form fields? but this didn't seem to lend itself to my dual ng-repeat organization I am currently using.
Is what I am trying to accomplish possible and if so anyone have pointers on what I should be looking at? Thanks for your time.
I was able to use ng-if's to solve this. It's not as clean as I had hoped but it is doing the trick.
<div data-ng-repeat="pic2 in vm.data.Pictures" class="picture{{$index}} pictures">
<div data-ng-repeat="desc in pic2.Descriptions">
<p data-ng-if="desc.DescriptionType=='p'">{{desc.Text}}</p>
<span data-ng-if="desc.DescriptionType=='span'">{{desc.Text}}</span>
<div data-ng-if="desc.DescriptionType=='div'">{{desc.Text}}</div>
<label data-ng-if="desc.DescriptionType=='label'">{{desc.Text}}</label>
<h1 data-ng-if="desc.DescriptionType=='h1'">{{desc.Text}}</h1>
<h2 data-ng-if="desc.DescriptionType=='h2'">{{desc.Text}}</h2>
<h3 data-ng-if="desc.DescriptionType=='h3'">{{desc.Text}}</h3>
<h4 data-ng-if="desc.DescriptionType=='h4'">{{desc.Text}}</h4>
<h5 data-ng-if="desc.DescriptionType=='h5'">{{desc.Text}}</h5>
<ul data-ng-if="desc.DescriptionType=='ul'"><li>{{desc.Text}}</li></ul>
<ol data-ng-if="desc.DescriptionType=='ol'"><li>{{desc.Text}}</li></ol>
</div>
</div>
The nested ng-repeat doesn't have any kind of HTML element or directive on it, so there's nothing to repeat.
Something like this should work:
<div ng-repeat="pic2 in vm.data.Pictures" ng-show="{{$index}} == vm.index">
<div ng-repeat="desc in pic2.Descriptions">
{{desc.DescriptionType}}
{{desc.Text}}
</div>
</div>
Related
I'm having an issue with ngRepeat :
I want to display a list of students in two different ways. In the first one they are filtered by group, and in the second they are not filtered.
The whole display being quite complex, I use a ngInclude with a template to display each student. I can switch between view by changing bClasseVue, each switch being followed by a $scope.$apply().
<div ng-if="currentCours.classesOfGroup !== undefined"
ng-show="bClassesVue">
<div ng-repeat="group in currentCours.classesOfGroup">
<br>
<h2>Classe : [[group.name]]</h2>
<div class="list-view">
<div class="twelve cell"
ng-repeat="eleve in group.eleves | orderBy:'lastName'"
ng-include="'liste_eleves.html'">
</div>
</div>
</div>
</div>
<div class="list-view" ng-show="!bClassesVue">
<div class="twelve cell"
ng-repeat="eleve in currentCours.eleves.all"
ng-include="'liste_eleves.html'">
</div>
</div>
My problem happens when my list of students change (currentCours here). Instead of refreshing the ngRepeat, both lists concatenate, but only in the unfiltered view.
I tried adding some $scope.$apply in strategic places (and I synchronize my list for example) but it doesn't help.
EDIT : the function used to refresh currentCours in the controller. It's called when a "cours" is selected inside a menu.
$scope.selectCours = function (cours) {
$scope.bClassesVue = false;
$scope.currentCours = cours;
$scope.currentCours.eleves.sync().then(() => {
if ($scope.currentCours.classe.type_groupe === 1) {
let _elevesByGroup = _.groupBy($scope.currentCours.eleves.all, function (oEleve) {
return oEleve.className;
});
$scope.currentCours.classesOfGroup = [];
for(let group in _elevesByGroup) {
$scope.currentCours.classesOfGroup.push({
name: group,
eleves: _elevesByGroup[group]
});
}
$scope.bClassesVue = true;
}
});
utils.safeApply($scope);
};
Well, I found a workaround, but I still don't know why it didn't work, so if someone could write an explanation, I would be very thankful.
My solution was simply to open and close the template each time I switch between views.
I'm trying to make a minimal but fancy AngularJS tutorial example, and I am running into an issue where after updating the entire tree for a model (inside the scope of an ng-change update), a template that is driven by a top-level ng-repeat is not re-rendered at all.
However, if I add the code $scope.data = {} at a strategic place, it starts working; but then the display flashes instead of being nice and smooth. And it's not a great example of how AngularJS automatic data binding works.
What am I missing; and what would be the right fix?
Exact code - select a country from the dropdown -
This jsFiddle does not work: http://jsfiddle.net/f9zxt36g/
This jsFiddle works but flickers: http://jsfiddle.net/y090my10/
var app = angular.module('factbook', []);
app.controller('loadfact', function($scope, $http) {
$scope.country = 'europe/uk';
$scope.safe = function safe(name) { // Makes a safe CSS class name
return name.replace(/[_\W]+/g, '_').toLowerCase();
};
$scope.trunc = function trunc(text) { // Truncates text to 500 chars
return (text.length < 500) ? text : text.substr(0, 500) + "...";
};
$scope.update = function() { // Handles country selection
// $scope.data = {}; // uncomment to force rednering; an angular bug?
$http.get('https://rawgit.com/opendatajson/factbook.json/master/' +
$scope.country + '.json').then(function(response) {
$scope.data = response.data;
});
};
$scope.countries = [
{id: 'europe/uk', name: 'UK'},
{id: 'africa/eg', name: 'Egypt'},
{id: 'east-n-southeast-asia/ch', name: 'China'}
];
$scope.update();
});
The template is driven by ng-repeat:
<div ng-app="factbook" ng-controller="loadfact">
<select ng-model="country" ng-change="update()"
ng-options="item.id as item.name for item in countries">
</select>
<div ng-repeat="(heading, section) in data"
ng-init="depth = 1"
ng-include="'recurse.template'"></div>
<!-- A template for nested sections with heading and body parts -->
<script type="text/ng-template" id="recurse.template">
<div ng-if="section.text"
class="level{{depth}} section fact ng-class:safe(heading);">
<div class="level{{depth}} heading factname">{{heading}}</div>
<div class="level{{depth}} body factvalue">{{trunc(section.text)}}</div>
</div>
<div ng-if="!section.text"
class="level{{depth}} section ng-class:safe(heading);">
<div class="level{{depth}} heading">{{heading}}</div>
<div ng-repeat="(heading, body) in section"
ng-init="depth = depth+1; section = body;"
ng-include="'recurse.template'"
class="level{{depth-1}} body"></div>
</div>
</script>
</div>
What am I missing?
You changed reference of section property by executing section = body; inside of ng-if directives $scope. What happened in details (https://docs.angularjs.org/api/ng/directive/ngIf):
ng-repeat on data created $scope for ng-repeat with properties heading and section;
Template from ng-include $compile'd with $scope from 1st step;
According to documentation ng-if created own $scope using inheritance and duplicated heading and section;
ng-repeat inside of template executed section = body and changed reference to which will point section property inside ngIf.$scope;
As section is inherited property, you directed are displaying section property from another $scope, different from initial $scope of parent of ngIf.
This is easily traced - just add:
...
<script type="text/ng-template" id="recurse.template">
{{section.Background.text}}
...
and you will notice that section.Background.text actually appoints to proper value and changed accordingly while section.text under ngIf.$scope is not changed ever.
Whatever you update $scope.data reference, ng-if does not cares as it's own section still referencing to previous object that was not cleared by garbage collector.
Reccomdendation:
Do not use recursion in templates. Serialize your response and create flat object that will be displayed without need of recursion. As your template desired to display static titles and dynamic texts. That's why you have lagging rendering - you did not used one-way-binding for such static things like section titles. Some performance tips.
P.S. Just do recursion not in template but at business logic place when you manage your data. ECMAScript is very sensitive to references and best practice is to keep templates simple - no assignments, no mutating, no business logic in templates. Also Angular goes wild with $watcher's when you updating every of your section so many times without end.
Thanks to Apperion and anoop for their analysis. I have narrowed down the problem, and the upshot is that there seems to be a buggy interaction between ng-repeat and ng-init which prevents updates from being applied when a repeated variable is copied in ng-init. Here is a minimized example that shows the problem without using any recursion or includes or shadowing. https://jsfiddle.net/7sqk02m6/
<div ng-app="app" ng-controller="c">
<select ng-model="choice" ng-change="update()">
<option value="">Choose X or Y</option>
<option value="X">X</option>
<option value="Y">Y</option>
</select>
<div ng-repeat="(key, val) in data" ng-init="copy = val">
<span>{{key}}:</span> <span>val is {{val}}</span> <span>copy is {{copy}}</span>
</div>
</div>
The controller code just switches the data between "X" and "Y" and empty versions:
var app = angular.module('app', []);
app.controller('c', function($scope) {
$scope.choice = '';
$scope.update = function() {
$scope.data = {
X: { first: 'X1', second: 'X2' },
Y: { first: 'Y1', second: 'Y2' },
"": {}
}[$scope.choice];
};
$scope.update();
});
Notice that {{copy}} and {{val}} should behave the same inside the loop, because copy is just a copy of val. They are just strings like 'X1'. And indeed, the first time you select 'X', it works great - the copies are made, they follow the looping variable and change values through the loop. The val and the copy are the same.
first: val is X1 copy is X1
second: val is X2 copy is X2
But when you update to the 'Y' version of the data, the {{val}} variables update to the Y version but the {{copy}} values do not update: they stay as X versions.
first: val is Y1 copy is X1
second: val is Y2 copy is X2
Similarly, if you clear everything and start with 'Y', then update to 'X', the copies get stuck as the Y versions.
The upshot is: ng-init seems to fail to set up watchers correctly somehow when looped variables are copied in this situation. I could not follow Angular internals well enough to understand where the bug is. But avoiding ng-init solves the problem. A version of the original example that works well with no flicker is here: http://jsfiddle.net/cjtuyw5q/
If you want to control what keys are being tracked by ng-repeat you can use a trackby statement: https://docs.angularjs.org/api/ng/directive/ngRepeat
<div ng-repeat="model in collection track by model.id">
{{model.name}}
</div>
modifying other properties won't fire the refresh, which can be very positive for performance, or painful if you do a search/filter across all the properties of an object.
I am trying to find out a better way to bind my json data to my html .
Json:
$scope.json = { 'one': { 'name': 'level1', 'two': { 'name': 'level2', 'three': { 'name': 'level3' } } } };
Html:
<div ng-controller="myController" >
<div ng-repeat="data in json"> -- (1)
<b>{{data.name}}</b>
<div ng-repeat="data1 in data">
<b>{{data1.name}}</b>
<div ng-repeat="data2 in data1 track by $index"><b>{{data2.name}}</b></div> -- (2)
</div>
</div>
</div>
Pointers : //marked in view
There is no array in my json data , so , is there a better way rather using ng-repeat (sort of traditional for) . Anything like with binding in knockout or templates (i'm not sure How) .
I see there are no duplicates in my json but still to compromise the error i have been using track by $index at the final inner div(if exclude final div i see no error) .
1: There is no array in my json data , so , is there a better way
rather using ng-repeat (sort of traditional for) . Anything like with
binding in knockout or templates (i'm not sure How) .
There is no way to use JSON object for ng-repeat but you can directly use JSON object using . operator for property.
Check below code
<div ng-controller="myController" >
<div>
<b>{{json.one.name}}</b>
<b>{{json.one.two.name}}</b>
<b>{{json.one.two.three.name}}</b>
</div>
</div>
2 : I see there are no duplicates in my json but still to compromise
the error i have been using track by $index at the final inner div(if
exclude final div i see no error).
The reason for error is because you are trying to get index of JSON object which doesn't has index.
I have an ng-repeat. And I would like to change the class of just that element vs the entire group.
<button ng-class="defaultClass" ng-repeat="tube in node.Tubes" ng-click="toggleBtn(tube)">{{"Tube " + ($index + 1)}}</button>
with the above HTML on my ng-click I can pass the tube, which really only gives me the data passed from the API, if I console.log(this) I see the class name in an element called $$watchers but that seems odd to change it from there.
$scope.toggleBtn = function (element) {
console.log(element);
console.log(this);
}
In my controller I have $scope.defaultClass = "btn btn-off"; but if I change that with the function it changes every element.
How can I only change the class of the element clicked?
Continuing from the comments. Than you can't use $scope variable for that, because, as you said, it will be the same. TO solve this you need to use ng-class properly.
Docs: https://docs.angularjs.org/api/ng/directive/ngClass (see an example at the bottom of the page)
<button ng-class="{'btn-on' : tube.toggled, 'btn-off' : !tube.toggled}" ng-repeat="tube in node.Tubes" ng-click="toggleBtn(tube)">{{"Tube " + ($index + 1)}}</button>
http://plnkr.co/edit/WKLJ45yRYu1583C2ZnfT?p=preview
I'm not sure I understand if that's what you want, but you can use:
<button class="btn" ng-repeat="tube in node.Tubes" ng-class="{'btn-off':!toggled, 'btn-on':toggled}" ng-click="toggled = !toggled">{{"Tube " + ($index + 1)}}</button>
no need to add any code to the controller in this case.
These other answers are excellent. However, I would like to point out another method for this. Let's say you were looping through an array of receipts. For example, in the controller you had receipts in scope:
$scope.receipts = [ ... ];
And on the front-end you were looping through these receipts:
<div ng-repeat="receipt in receipts">{{ receipt.[attribute] }}</div>
One way to keep track of unique classes is to add a "class" key to the receipt objects. For example a receipt would look like:
receipt { 'id': '1', 'class' : ' ... ' }
On the front-end, you would determine the class using ng-class:
<div ng-repeat="receipt in receipts">
<div ng-class="receipt.class"></div>
</div>
And then, you could pass the receipt and its ID to a toggleButton() method like so:
<div ng-repeat="receipt in receipts">
<div class="btn" ng-click="toggleClass(receipt.id)"></div>
<div ng-class="receipt.class"></div>
</div>
And then within the controller you could simply update the class for that particular receipt (assuming here there is a method getReceipt() that gets a receipt from the array $scope.receipts):
$scope.toggleClass = function(id) {
getReceipt(id).class = { ... }
}
This would dynamically change the class for that single receipt based on the logic within the toggleClass() function.
Hi I am a newbie to angular js and I am hoping someone can help me out with the following problem.
I have a numeric field called numAdults and I need to show a set of field (such as name, address, telephone etc ) numAdult times to get those information for each of those person.
Here is the jsfiddle for the problem jsfiddle link
Here is also an overview of code of the controller
function bookingController($scope){
$scope.numAdults = 1;
$scope.personLoop = function(){
console.log('personLoop called')
return new Array($scope.numAdults);
//return new Array(2);
}
the html
<label for="book_num_adults">Number of adults:</label>
<input id="book_num_adults" type="text" ng-model="numAdults">
<div class="row" ng-repeat="t in personLoop()" style="border:2px solid red;margin-top:10px">
<h4>Person {{$index+1}}</h4>
<input placeholder="name"><br>
<input placeholder="address"><br>
<input placeholder="telephone"><br>
</div>
Can you also help me with how to transform this as an module ( not just a controller based )
Thank you in advance!
Your Fiddle was riddled with errors...
http://jsfiddle.net/bRgTR/5/
Under Frameworks & Extensions, you need to change the 2nd dropdown from "onLoad" to one of the "No wrap" options
Your controller definition is mangled. It's supposed to be: .controller('name', ['depname', function (depname) { })]); -- you had your closing array misplaced.
You should really use semi-colons.
You don't create an array of 5 items in JavaScript like this: var a = new Array(5), that creates an array that contains a 5. Instead, you should do var a = []; a.length = 5;