repeat div section in the length of list (Ionic) - javascript

I have a custom JavaScript file with some function in it. All the functions work perfectly fine.
One of the functions returns a list modules. I would like to repeat in my template the div section as many times is the length of my list.
This is my ionic template file:
<ion-view title="My Marks" id="page7">
<ion-content ng-controller="MyMarks" padding="true" class="has-header">
<div ng-repeat="module in getCourseModules">
<div class="row">
<div class="col">{{module}}</div>
</div>
<div class="row">
<div class="col col-50">Module Mark</div>
<div class="col col-50">{{GenerateRandomMarks[i]}}</div>
</div>
<br>
<br>
</div>
</ion-content>
And this is my controller inside my app.js:
app.controller('MyMarks', function ($scope){
$scope.courseNum = GenerateRandomNumber(0, 9);
$scope.getCourseName = getCourseName(courseNum);//Returns just Text
$scope.getCourseModules = getCourseModules(courseNum); //Returns the list
$scope.GenerateRandomMarks = GenerateRandomMarks(); //Returns a list of numbers
});
How can I repeat the segment of code I need? and in that segment of code, each time is repeated it should display different element of the list {{getCourseModules[i]}}.
I solved the most of it. But I cant figure out the repeat part. If I manually copy/and paste the code it works fine.

You need to use ngRepeat directive.
<div ng-repeat="model in getCourseModules">{{model}}</div>
<div ng-repeat="model in getCourseModules">{{someAnotherArray[$index]}}</div>

Related

I'd like to change the content of the <p></p> element by using javascript code but it dosen't work

I'd like to change the content of the p element:
<ion-view>
<ion-content>
<div class="list card">
<div class="item item-avatar">
<h4>{{name}}</h4>
</div>
<div class="item item-body">
<p id='output1'>
<h4>welcome to ionic</h4>
x
</p>
</div>
so I'm trying this javascript code:
<script type="text/javascript">
var output1 = document.getElementById('output1');
output1.innerHTML = data[id].when;
</script>
</div>
</ion-content>
</ion-view>
you can try out this
<ion-view>
<ion-content>
<div class="list card">
<div class="item item-avatar">
<h4>{{name}}</h4>
</div>
<div class="item item-body">
<p ng-bind-html="Mycontent">
</p>
</div>
</ion-content>
in Controller
$scope.Mycontent="<h4>welcome to ionic</h4> x";
this will print all html code into p tag as it is.
in final your javascript code wiil be like that
app.controller('myCtrl', function($scope) {
$scope.Mycontent=data[id].when;
});
When I tried it in Chrome, it worked to some degree. But as the linked questions below point out, the behavior can differ between browsers. This is my rendered html:
<div class="item item-body">
<p id="output1">data[id].when</p>
<h4>welcome to ionic</h4>
x
<p></p>
</div>
As you can see, your output1 p was broken into two. This happens if you use elements like h4 inside p elements. The heading breaks the paragraph into: p, h4, x, and another p. The first p is the one you defined, and its inner html is correctly replaced (well, it is empty initially, so it is just added). The result is that it looks like you just add the inner html instead of replacing it.
In order to fix it, you could use display: inline-block or (better) replace your p by a more appropriate element.
Please, read these questions for more information:
How to use an <h2> tag </h2> inside a <p></p> in the middle of a text?
Nesting block level elements inside the <p> tag... right or wrong?

How to delete dynamic data binded inside html elements after some event completion in angularjs

Hi , I am uploading documents along with some key word as you can see in the diagram.Here is the code for for inserting key words into the panel which is formed inside a div.
<div class="tagListForDocument col-xs-6 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">{{'TAG.TagsForDocument' | translate}}</div>
<div class="panel-body btn-group-vertical" role="group" aria-label="available tags">
<button ng-repeat="tag in ul.tagsForDocuments" ng-click="ul.removeTag(tag)" class="btn btn-flat">
<span class="icon-remove"></span> {{tag.name}}
</button>
</div>
</div>
</div>
As you can see the keywords are formed ({{tag.name}}) based on iteration of ul.tagsForDocuments array.
Now my problem is that I want to remove all these keywords once the uploading is finished.That means before uploading second time the panel should be empty. But dont know the efficient way of doing this. How can I reload this particular part of html with empty ul.tagsForDocuments array.
In your controller you can do:
ul.tagsForDocuments = [];
which will make the array empty. Angular will then update the view accordingly.

How do I put a couple of elements inside template?

I need to create templates in handlebars for an html page and the whole html should go inside of templates. For e.g. I have:
<div class= "something-pull-left-something">
<div class="someclass">
<li a href= ''>Some more info and some more divs and spans and html code</li>
</div>
</div>
and I should create a big template for the first div ''something-pull-left-something'' and smaller templates inside of it for the other items and I cant quite understand how this should happen.
Divide it up into parts as it makes sense. Try to avoid having one huge template. Instead, make one template that includes a number of other templates. You may run into performance issues but worry about that later -- it is likely not an issue.
Make main template which contains header, body and footer.
Add partials to the main template.
If you wants to use Bootstrap then you can go through this http://getbootstrap.com/components
or you can use bootstrap class
<div class="container">
<div class="col-md-12">
//code
</div>
<div class="col-md-12">
<div class="col-md-6">
//code
</div>
<div class="col-md-6">
//code
</div>
</div>
</div>

just one of the ng-bind-html in page work

I write angularjs application and have this block of code but just first html-bind-html works for me
<div ng-bind-html='newsTitle'>
<div ng-bind-html='newsDetail'></div>
</div>
When i change the priority like this :
<div ng-bind-html='newsDetail'>
<div ng-bind-html='newsTitle'></div>
</div>
It shows newsDetail value.
How many ng-bind-html per page can i declare? why second value doesn't show?
I guess I understand your problem.
<div ng-bind-html='newsTitle'> <!-- This will replace the content of the div with $scope.newsTitle -->
<div ng-bind-html='newsDetail'> <!-- So this won't appear, because it has been removed by ng-bind-html='newsTitle' -->
</div>
</div>
Look my comments in the code. So if you put newsDetails in the first place, the binded HTML ($scope.newsDetail) will replace the current content aswell.
In a word, ng-bind-html replace the current content of your element with the binded HTML you provide. So you shouldn't put HTML in those elements.
You just have to do something like this :
<div class="news">
<div ng-bind-html='newsTitle'></div>
<div ng-bind-html='newsDetail'></div>
</div>
Some docs about ngBindHtml directive : https://docs.angularjs.org/api/ng/directive/ngBindHtml
If it's real copy of your html. Then I suppose that it's problem with structure. Please close your block:
<div> </div>
You can try and write it like this
<div><span ng-bind-html='newsTitle'></span></div>
<div><span ng-bind-html='newsDetail'></span></div>

ng-repeat repeating elements but not showing content inside ng-view

I have a controller:
function ItemsController($scope, $http){
$scope.init = function(){
$scope.siteItems = [
{id:'1', path:'img/1.png'},
{id:'2', path:'img/2.png'}
];
}
};
and I have a view items.html:
<div class="row" ng-controller="ItemsController" ng-init="init()">
<div class="col-xs-6 col-md-3" ng-repeat="item in siteItems">
<a href="#/item/{{item.id}}" class="thumbnail">
<img src="{{item.path}}">
</a>
</div>
</div>
when ever I load the view inside the ng-view the list gets initialised and ng-repeat produces two elements. However {{item.path}} and {{item.id}} are empty. I tried to do it with ng-src but the result was the same. I was curious if it will work with ng-bind just to see if it will bind the content and it works but its not what Im trying to do. When ever I move the content from the items.html to the main index.html view everything works. Does anybody have an idea what am I doing wrong?
EDITED:
Here is a working plunker. On my machine I wrote it like:
and I get a result of:
I landed this on this probably 2 years late, but I was using Jekyll and although it's strange that the source code look exactly the same, meaning it should work, it doesn't.
The reason being {{ }} is being reserved for Liquid template engine. To overcome this, I have found this code to re-define the syntax.
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
So now I can use [[ ]] instead of {{ }} and it works out.
Source: http://www.noxidsoft.com/development/using-jekyll-and-angularjs-together/
Have you tried doing it like this:
function ItemsController($scope, $http){
$scope.items = [
{id:'1', path:'img/1.png'},
{id:'2', path:'img/2.png'}
];
};
And the Html without the init?
<div class="row" ng-controller="ItemsController">
<div class="col-xs-6 col-md-3" ng-repeat="item in items">
<a href="#/item/{{item.id}}" class="thumbnail">
<img src="{{item.path}}">
</a>
</div>
</div>
I made a plunker out of mylescc's answer, and it's working fine:
<div class="row" ng-controller="ItemsController">
<div class="col-xs-6 col-md-3" ng-repeat="item in items">
<a href="#/item/{{item.id}}" class="thumbnail">
<img src="{{item.path}}">
</a>
</div>
</div>
There is no picture at there referenced path, of course, but the href link is shown correctly. And actually your code works fine, too. See plunker. So, it seems to me, you haven't initialized angularjs correctly.

Categories