according to this solution i built my AngularJS app. Now i want to access a parent's value within a nested structure.
I tried this, but it does not work: http://jsfiddle.net/BwDAP/
<body ng-app="WeeklyApp" ng-controller="WeeklyController" >
<div ng-repeat="week in myData">
<div ng-repeat="day in week.days">
{{day.dow}} - {{day.templateDay}}
<b>Jobs:</b><br/>
<ul>
<li ng-repeat="job in day.jobs">
{{job.name}}
<br />
<!-- PARENT -->
parent: {{job.parent.dow}}
</li>
</ul>
</div>
</div>
</body>
Any solutions?
thx
A haha, too easy ;-)
Here is the solution: http://jsfiddle.net/Lm6KZ/
<body ng-app="WeeklyApp" ng-controller="WeeklyController" >
<div ng-repeat="week in myData">
<div ng-repeat="day in week.days">
{{day.dow}} - {{day.templateDay}}
<b>Jobs:</b><br/>
<ul>
<li ng-repeat="job in day.jobs">
{{job.name}}
<br />
<!-- PARENT -->
parent: {{day.dow}}
</li>
</ul>
</div>
</div>
</body>
Related
does anyone know how Can I add a class in the A tag:
Subscribe
Here is my html:
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
you can use
$('a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('div#prod-subscription a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
.classHere{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
You could use jQuery's filter function and filter the link where the exact text is 'Subscribe' (this may cause problems if you have multiple links with that exact text)
$('a').filter(function() {
return $(this).text() === 'Subscribe';
}).addClass('new-class');
.new-class {color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Subscribe
Not sure I fully understand the question. Do you just want to give the anchor tag a class? That can be done as simply as <a class="your_class" href="your_link">Subscribe</a>
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>
As an example, I'm starting with html like this:
<div id="leftSide">
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" />
</div>
<p class="theChoice"></p>
</div>
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" />
</div>
<p class="theChoice"></p>
</div>
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" />
</div>
<p class="theChoice"></p>
</div>
</div>
The idea being, when I select an item i.e. .choice I want to add it to the input and the .theChoice. This way it displays what the user chose but they can edit it by typing the box.
I know how to do this with jquery. However, it will be a lot of overhead and I want to learn angular. I also know Angular can really clean this up.
I've used ng-model to mirror what a user types in the input box doing this:
<div id="leftSide">
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" ng-model="choice1" />
</div>
<p class="theChoice">{{choice1}}</p>
</div>
...
</div>
I've used ng-repeat to loop out three of the .item divs:
<div id="leftSide" ng-controller="leftSide">
<div class="item" ng-g-repeat="i in getNumber(number) track by $index">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" ng-model="choice1" />
</div>
<p class="theChoice">{{choice1}}</p>
</div>
...
</div>
and js:
myApp.controller('leftSide',function($scope,$index){
//three left boxes
$scope.number = 3;
$scope.getNumber = function(num) {
return new Array(num);
}
...
});
The problem I have is (obviously) selecting the .choice' is targeting all myng-models and not each that associate to its.editor. I'm certain I can use$indexto handle this and/or maybe ng-click. I'm just a little lost on how to target the correct one based on the.choice` I select.
I don't like the jQuery implementation, so I tried to solve your problem by pure AngularJS. You can run the snippet to check the answer:
var app = angular.module('my-app', [], function() {
})
app.controller('AppController', function($scope) {
$scope.number = 3;
$scope.choice = [];
$scope.getNumber = function(num) {
return new Array(num);
}
$scope.choiceClick = function(i) {
debugger;
$scope.choice[i] = 'This is choice';
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="my-app" ng-controller="AppController">
<div class="item" ng-repeat="it in getNumber(number) track by $index">
<div class="editor">
<ul class="choices">
<li class="choice" ng-click="choiceClick($index)">This is choice</li>
</ul>
<input class="myChoice" ng-model="choice[$index]" />
</div>
<p class="theChoice">{{choice[$index]}}</p>
</div>
</body>
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'm building a app using AngularJs
In one of my template partials I use "ng-repeat" to spawn multiple forms:
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4 usbDevices">
<li ng-repeat="usbDevice in usbDevices">
<div class="block">
<form name="form{{usbDevice.id}}">
<!-- input fields -->
</form>
</div>
</li>
</ul>
How do I make that when any one of this forms shows up "ng-dirty" a "Save" button shows in the bottom? Do I need a watcher?
Save
You can wrap it all in ng-form , something like:
<body ng-controller="MainCtrl" ng-form="MainForm">
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4 usbDevices" >
<li ng-repeat="usbDevice in usbDevices">
<div class="block">
<form name="form{{usbDevice.id}}">
<input required ng-model="usbDevice.description" >
</form>
</div>
</li>
</ul>
<button ng-show="MainForm.$valid">Save</button>
</body>
Working: http://plnkr.co/edit/Z0CyyoqVHzs4ZV1F6uG4