Here is my angular View
<li class= "riskmanagementlink" ng-repeat="link in links">
<h3> {{link.Description}} </h3>
<a> {{link.Title}} </a>
<hr/>
</li>
I would like to remove the hr tag for the last list item. Can anybody help me do this please?
The ng-repeat directive comes with some extra properties like $last, which indicates that you're on the last item of your collection.
<li class="riskmanagementlink" ng-repeat="link in links">
<h3> {{ link.Description }} </h3>
<a> {{ link.Title }} </a>
<hr ng-if="!$last" />
</li>
More info in the docs.
Related
I have an issue with Drag and Drop with Angular JS on my Quiz
The code works fine if I just use one object simulated here by the index number i.e. as shown below myQuest[0].answers
ng-repeat="myQuestion in myQuest | limitTo: 5">
<p class="txt">{{myQuestion.question}} ?</p>
<li class=""
lr-drag-src="reorder" lr-drop-target="reorder"
ng-repeat="Answer in myQuest[0].answers ">
<img ng-src="{{ Answer.image }}">
{{Answer.id}}
</li>
<p class="txt">{{analysis}}</p>
<div class="feedback">
but fails when I use the code below which is required to move to next question i.e myQuest[$index].answers of the question to be answered
Symptoms: The Drag and Drop reorder image reorders by moving an answer to the next object /question and not the question been answered
ng-repeat="myQuestion in myQuest | limitTo: 5">
<p class="txt">{{myQuestion.question}} ?</p>
<li class=""
lr-drag-src="reorder" lr-drop-target="reorder"
ng-repeat="Answer in myQuest[$index].answers ">
<img ng-src="{{ Answer.image }}">
{{Answer.id}}
</li>
<p class="txt">{{analysis}}</p>
<div class="feedback">
I've tried track by $index on both parent and child ng-repeats to no avail
This fixed it thankyou lzagkaretos
ng-repeat="myQuestion in myQuest track by $index | limitTo: 5"
ng-init="**questionIndex** = $index" >
<p class="txt">{{myQuestion.question}} ?</p>
<li class=""
lr-drag-src="reorder" lr-drop-target="reorder"
ng-repeat="Answer in myQuest****[questionIndex]**.answers"
ng-init="answerIndex = $index" >
I have an ng-repeat inside another one and I am trying to find out the parents index.
Because it is being ordered after the fact, I can't do the typical
ng-repeat="(step_index, step) in flow"
Does anyone know why this would be happening?
<ul>
<li ng-repeat="step in flow | orderBy:'+step_number'">
<div class="step_container">
<div class="step_content">
<div ng-repeat="task in step.tasks">
<div class="task_container">
<div class="task_content">
{{ $parent.$index }} - {{ $index }}
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
You can use ng-init="$parentIndex = $index" on your parent <li>, then call $parentIndex in the child ng-repeat
<ul>
<li ng-repeat="step in flow | orderBy:'+step_number'" ng-init="$parentIndex = $index">
<div class="step_container">
<div class="step_content">
<div ng-repeat="task in step.tasks">
<div class="task_container">
<div class="task_content">
{{ $parentIndex }} - {{ $index }}
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
catch is that
I would like to display the div only once, not three times:
//angular js code
$scope.arr=["sunday","mpnday","tuesday"];
//html view
<ul>
<li ng-repeat="x in arr">
<div><p>{{ x }}</p>
</div>
</li>
</ul>
Try:
<ul>
<li ng-repeat="x in arr">
<div ng-if="$first">
<p>{{ x }}</p>
</div>
<p ng-if="!$first">{{ x }}</p>
</li>
</ul>
Anyway, I would recommend you to rewrite your markup in valid way. div inside li is quite bad markup style.
I have object which contains question and list of choices. I'm display this object on the page using nested ng-repeats. When I'm trying to change 'question' everything changes just fine, but when I'm trying to change 'choice' nothing happens. Where is the problem?
My page:
<div class="panel">
<div class="row">
<div class="large-12 columns">
<h3>{{ title }}</h3>
<ol>
<li ng-repeat="q in quiz">
<input type="text" ng-model="q.question">
<ul class="remove-li-dots">
<li ng-model="choice" ng-repeat="choice in q.choices">
<input type="text" ng-model="choice" name="answer{{ q.id }}" >
</li>
</ul>
</br>
</li>
</ol>
<a class="button" ng-click="submitQuiz()">Submit</a><br>
{{ quiz }}
</div>
</div>
Screenshot of the page:
https://www.dropbox.com/s/i52fwq1os0cvcr9/repeat.png?dl=0
Problem is that choice is a string, so when you are changing it in child scope it is changing only in child scope.
To fix this - reference it by index in array ng-repeat="(choiceIndex,choice) in q.choices,ng-model="q.choices[choiceIndex]".
Also to prevent inputs from loosing focus when changing items - you will need to add track by $index in ng-repeat directive.
<ol>
<li ng-repeat="q in quiz">
<input type="text" ng-model="q.question">
<ul class="remove-li-dots">
<li ng-model="choice" ng-repeat="(choiceIndex,choice) in q.choices track by choiceIndex">
<input type="text" ng-model="q.choices[choiceIndex]" name="answer{{ q.id }}">
</li>
</ul>
</li>
</ol>
working example:
http://plnkr.co/edit/GJacjkzfT4FpfC6szsNk?p=preview
For better understanding how angular scopes works, I recommend reading this: https://github.com/angular/angular.js/wiki/Understanding-Scopes
I discovered the difference when checking to see what the requests looked like to download the JavaScript files from the server. I just wanted to see what the link looked like in the HTML, but when I checked in the inspector, I couldn't find any references to any JavaScript. When I checked the source, they were certainly there.
You can see the example here: http://todomvc.com/architecture-examples/angularjs/#/
I can't seem to figure out why.
Here it is in Firebug's inspector:
And here it is when viewing it from the source:
There are also some element attributes that seem to disappear between the two.
Can someone explain why?
Edit:
Here's the complete markup from source:
<!doctype html>
<html lang="en" data-framework="angularjs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AngularJS • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<style>[ng-cloak] { display: none; }</style>
</head>
<body ng-app="todomvc">
<ng-view />
<script type="text/ng-template" id="todomvc-index.html">
<section id="todoapp" ng-controller="TodoCtrl">
<header id="header">
<h1>todos</h1>
<form id="todo-form" ng-submit="addTodo()">
<input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus>
</form>
</header>
<section id="main" ng-show="todos.length" ng-cloak>
<input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li ng-repeat="todo in todos | filter:statusFilter track by $index" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
<div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed">
<label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" ng-click="removeTodo(todo)"></button>
</div>
<form ng-submit="doneEditing(todo)">
<input class="edit" ng-trim="false" ng-model="todo.title" todo-escape="revertEditing(todo)" ng-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
</form>
</li>
</ul>
</section>
<footer id="footer" ng-show="todos.length" ng-cloak>
<span id="todo-count"><strong>{{remainingCount}}</strong>
<ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
</span>
<ul id="filters">
<li>
<a ng-class="{selected: status == ''} " href="#/">All</a>
</li>
<li>
<a ng-class="{selected: status == 'active'}" href="#/active">Active</a>
</li>
<li>
<a ng-class="{selected: status == 'completed'}" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" ng-click="clearCompletedTodos()" ng-show="completedCount">Clear completed ({{completedCount}})</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Credits:
Christoph Burgdorf,
Eric Bidelman,
Jacob Mumm and
Igor Minar
</p>
<p>Part of TodoMVC</p>
</footer>
</script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/todoCtrl.js"></script>
<script src="js/services/todoStorage.js"></script>
<script src="js/directives/todoFocus.js"></script>
<script src="js/directives/todoEscape.js"></script>
</body>
</html>
And here's what the markup looks like in the inspector:
<!DOCTYPE html>
<html lang="en" data-framework="angularjs">
<head>
<style type="text/css">
#charset "UTF-8";
[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{
display:none !important;
}ng\:form{
display:block;
}
</style>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>
AngularJS • TodoMVC
</title>
<link href="bower_components/todomvc-common/base.css" rel="stylesheet">
<style>
[ng-cloak] {
display: none;
}
</style>
</head>
<body class="learn-bar ng-scope" ng-app="todomvc">
<aside class="learn">
<header>
<h3>
AngularJS
</h3>
<span class="source-links">
<h5>
Architecture Example
</h5>
<a href="https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/angularjs">
Source
</a>
<h5>
Dependency Example
</h5>
<a class="demo-link" href="http://todomvc.com/labs/dependency-examples/angularjs_require">
Demo
</a>
,
<a href="https://github.com/tastejs/todomvc/tree/gh-pages/labs/dependency-examples/angularjs_require">
Source
</a>
<h5>
AngularJS Optimized
</h5>
<a class="demo-link" href="http://todomvc.com/architecture-examples/angularjs-perf">
Demo
</a>
,
<a href="https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/angularjs-perf">
Source
</a>
<h5>
TypeScript & AngularJS
</h5>
<a class="demo-link" href="http://todomvc.com/labs/architecture-examples/typescript-angular">
Demo
</a>
,
<a href="https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/typescript-angular">
Source
</a>
</span>
</header>
<hr>
<blockquote class="quote speech-bubble">
<p>
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
</p>
<footer>
<a href="http://angularjs.org">
AngularJS
</a>
</footer>
</blockquote>
<hr>
<h4>
Official Resources
</h4>
<ul>
<li>
<a href="http://docs.angularjs.org/tutorial">
Tutorial
</a>
</li>
<li>
<a href="http://docs.angularjs.org/api">
API Reference
</a>
</li>
<li>
<a href="http://docs.angularjs.org/guide">
Developer Guide
</a>
</li>
<li>
<a href="http://builtwith.angularjs.org">
Applications built with AngularJS
</a>
</li>
<li>
<a href="http://blog.angularjs.org">
Blog
</a>
</li>
<li>
<a href="http://docs.angularjs.org/misc/faq">
FAQ
</a>
</li>
<li>
<a href="http://www.youtube.com/angularjs">
AngularJS Meetups
</a>
</li>
</ul>
<h4>
Articles and Guides
</h4>
<ul>
<li>
<a href="http://www.codeschool.com/code_tv/angularjs-part-1">
Code School AngularJS course
</a>
</li>
<li>
<a href="http://net.tutsplus.com/tutorials/javascript-ajax/5-awesome-angularjs-features">
5 Awesome AngularJS Features
</a>
</li>
<li>
<a href="http://briantford.com/blog/angular-yeoman.html">
Using Yeoman with AngularJS
</a>
</li>
<li>
<a href="http://stephenplusplus.github.io/meangular">
me&ngular - an introduction to MVW
</a>
</li>
</ul>
<h4>
Community
</h4>
<ul>
<li>
<a href="http://www.youtube.com/playlist?list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz">
Walkthroughs and Tutorials on YouTube
</a>
</li>
<li>
<a href="https://groups.google.com/forum/?fromgroups#!forum/angular">
Google Groups mailing list
</a>
</li>
<li>
<a href="http://stackoverflow.com/questions/tagged/angularjs">
angularjs on Stack Overflow
</a>
</li>
<li>
<a href="https://twitter.com/angularjs">
AngularJS on Twitter
</a>
</li>
<li>
<a href="https://plus.google.com/+AngularJS/posts">
AngularjS on Google +
</a>
</li>
</ul>
<footer>
<hr>
<em>
If you have other helpful links to share, or find any of the links above no longer work, please
<a href="https://github.com/tastejs/todomvc/issues">
let us know
</a>
.
</em>
</footer>
</aside>
<ng-view class="ng-scope">
<section id="todoapp" class="ng-scope" ng-controller="TodoCtrl">
<header id="header">
<h1>
todos
</h1>
<form id="todo-form" class="ng-pristine ng-valid" ng-submit="addTodo()">
<input id="new-todo" class="ng-pristine ng-valid" autofocus="" ng-model="newTodo" placeholder="What needs to be done?">
</form>
</header>
<section id="main" class="ng-hide" ng-show="todos.length">
<input id="toggle-all" class="ng-pristine ng-valid" type="checkbox" ng-click="markAll(allChecked)" ng-model="allChecked">
<label for="toggle-all">
Mark all as complete
</label>
<ul id="todo-list">
</ul>
</section>
<footer id="footer" class="ng-hide" ng-show="todos.length">
<span id="todo-count">
<strong class="ng-binding">
0
</strong>
<ng-pluralize when="{ one: 'item left', other: 'items left' }" count="remainingCount">
items left
</ng-pluralize>
</span>
<ul id="filters">
<li>
<a class="selected" href="#/" ng-class="{selected: status == ''} ">
All
</a>
</li>
<li>
<a href="#/active" ng-class="{selected: status == 'active'}">
Active
</a>
</li>
<li>
<a href="#/completed" ng-class="{selected: status == 'completed'}">
Completed
</a>
</li>
</ul>
<button id="clear-completed" class="ng-binding ng-hide" ng-show="completedCount" ng-click="clearCompletedTodos()">
Clear completed (0)
</button>
</footer>
</section>
<footer id="info" class="ng-scope">
<p>
Double-click to edit a todo
</p>
<p>
Credits:
<a href="http://twitter.com/cburgdorf">
Christoph Burgdorf
</a>
,
<a href="http://ericbidelman.com">
Eric Bidelman
</a>
,
<a href="http://jacobmumm.com">
Jacob Mumm
</a>
and
<a href="http://igorminar.com">
Igor Minar
</a>
</p>
<p>
Part of
<a href="http://todomvc.com">
TodoMVC
</a>
</p>
</footer>
</ng-view>
</body>
</html>
Inspector = current state of the dom (May be modfied by scripts), source code = original data send by server.
Certain elements like scripts that where used to store templates or other data , are often removed from dom by the libraries after their content was read to keep the dom clean.
That's why they don't appear in the inspector.