I'm displaying two text-angular WYSIWYG fields in ng-repeat like so
<div data-ng-repeat="n in langInput.values" class="sell__description-container">
<h2 class="sell__heading-secondary">
Opis w języku: {{ n.selected }}
</h2>
<div text-angular="text-angular"
name="htmlcontent_{{n.id}}_{{ n.selected }}"
data-ng-model="descriptionHtml[$index]"
class="sell__text-editor"
required>
</div>
{{ descriptionHtml[$index] }}
And just below field I'm showing its model and it's working correctly. It shows text with all this tags which I chose in editor.
But 200 lines below I have something like summary and I want to display this model one more time in other ng-repeat loop:
<tr data-ng-repeat="n in langInput.values">
<td>Opis ({{ n.selected }})</td>
<td>
{{ descriptionHtml[$index] }}
<br>
{{ $index }}
</td>
</tr>
And here it is not showing description value. Althought $index is indeed 0 and 1 like above.. Why is that? How to fix?
At the moment I just want to make it work. Later on I'll not display it as a string in td but I'll pass this model as a string to function which will open bootstrap modal window in which I'll bind this string as html with ng-bind-html so it will be something like preview.
I found problem. I copied code from textangular docs and it has its own controller so my controller structure was like
<div ng-controller="external">
<div ng-controller="textEditor">
here i have ng-repeat and here i'm also displaying content of editor
</div>
here i tried to ng-repeat over it again
</div>
So in textEditor ctrl it was in right scope and it display correctly. I need to pass this value from child scope(textEditor) to parent scope(external).
Declaring $scope.descriptionHtml in parent controller solve the issue since child controller inherit scope and when I modify it in child then also parent is refreshed.
Related
I am working on a small AngularJS application. In one of the views, I have replaced some hard-coded html with data coming from a JSON file that I iterate through:
<class="actions-list">
<div ng-repeat="item in $ctrl.myCustomService.config.items"
ng-class="{'disabled': !item.isEanabled}"
class="actions-item"
ng-click="$ctrl.selectAction('{{item.action}}')">
{{item.name | translate }}
</div>
</div>
The problem is that, since this replacement, the function fired by ng-click, that used to be (hard-coded) ng-click="$ctrl.selectAction('register'); and so on, does not work anymore.
Why does that happen? How can I fix the problem?
You don't need quotes or {{ }} inside ng-click:
<class="actions-list">
<div ng-repeat="item in $ctrl.myCustomService.config.items"
ng-class="{'disabled': !item.isEanabled}"
class="actions-item"
ng-click="$ctrl.selectAction(item.action)">
{{item.name | translate }}
</div>
I'm trying to deal with the issue of scope inside of an ng-repeat loop - I've browsed quite a few questions but have not quite been able to get my code to work.
Controller code:
function Ctrl($scope) {
$scope.lines = [{text: 'res1'}, {text:'res2'}];
}
View:
<div ng-app>
<div ng-controller="Ctrl">
<div ng-repeat="line in lines">
<div class="preview">{{text}}{{$index}}</div>
</div>
<div ng-repeat="line in lines">
<-- typing here should auto update it's preview above -->
<input value="{{line.text}}" ng-model="text{{$index}}"/>
<!-- many other fields here that will also affect the preview -->
</div>
</div>
</div>
Here's a fiddle: http://jsfiddle.net/cyberwombat/zqTah/
Basically I have an object (it's a flyer generator) which contains multiple lines of text. Each line of text can be tweaked by the user (text, font, size, color, etc) and I want to create a preview for it. The example above only shows the input field to enter text and I would like that to automatically/as-you-type update the preview div but there will be many more controls.
I am also not sure I got the code right for the looping index - is that the best way to create a ng-model name inside the loop?
For each iteration of the ng-repeat loop, line is a reference to an object in your array. Therefore, to preview the value, use {{line.text}}.
Similarly, to databind to the text, databind to the same: ng-model="line.text". You don't need to use value when using ng-model (actually you shouldn't).
Fiddle.
For a more in-depth look at scopes and ng-repeat, see What are the nuances of scope prototypal / prototypical inheritance in AngularJS?, section ng-repeat.
<h4>Order List</h4>
<ul>
<li ng-repeat="val in filter_option.order">
<span>
<input title="{{filter_option.order_name[$index]}}" type="radio" ng-model="filter_param.order_option" ng-value="'{{val}}'" />
{{filter_option.order_name[$index]}}
</span>
<select title="" ng-model="filter_param[val]">
<option value="asc">Asc</option>
<option value="desc">Desc</option>
</select>
</li>
</ul>
I am working with angularJS ng-repeat. So, I want to use my ng-repeat value in another div. I am doing the following. But it doesn't loop through and give me the exact value.
Code in ng-repeat
<div uib-slide index="$index" class="uibSlider" ng-repeat='id in code' ng-click="$parent.ContentId = id.ContentId" ng-class="{'selected' : ContentId.Id === ContentId}">
<paragraph tag>{{id.ContentId}}</paragraph tag>
</div>
Code in Another Div
<div>
<label>{{(code| filter: {Id: ContentId}: true)[1].ContentId}}</label>
</div>
So, the problem is I have bunch of data and in the another div if I make the array value from 0 to 1. i'm getting null value. But automatically the value isn't changing based on what I contentID select. It always gives me the same value. I'm not sure where I'm going wrong.
Any Help would be appreciated.
You can use ng-repeat-start | ng-repeat-end
<div uib-slide ng-repeat-start='id in code'>
<paragraph tag>{{id.ContentId}}</paragraph tag>
</div>
<div ng-repeat-end>
<label>{{(id.ContentId}}</label>
</div>
If you are trying to show the same data in a modal, depending where the user clicks:
<div ng-repeat="id in code">
<!-- when the user clicks here, the modal will open. The ID will be the same as the one clicking -->
<a ng-click="openModal(id)">Open modal for id: {{id}}</a>
</div>
Then in your controller you will have a function called openModal which takes a parameter (id) that will open the modal and pass along the data.
So, I'm actually new to angularJS and I've been searching for a while and trying different ways to achieve something, but it seems impossible, to me.
I have this ng-repeat that should show only one of my 6 position array. When I click in "Change", than I should load the second and then the third and so on, until all my data have been accessed and changed by the user, that's why I limited it to 1.
The Professor's select should load according to a parameter from the current ng-repeat class. I have no idea how to solve this problem. I'm trying right now to use a service to load the professor's dropdown, but with no success.
<div class="row" **ng-repeat="class in classes | offset:currentPage | limitTo: 1"** on-finish-render="ngRepeatFinished">
<div style="display: block;">
<div>
<p><label for="">Change:</label> {{ class.professorName }}</p>
</div>
<div>
<p><label for="">By:</label>
<select id="professor" name="professor" class="form-control">
<option ng-repeat="professor in professors" value="{{professor.id}}">{{ professor.name }}</option>
</select>
</p>
</div>
</div>
</div>
<hr>
<center><button type="button" ng-click="change(class.classId)" class="btn btn-primary">Change</button></center>
</div>
What's the best way to achieve something like this (Show only one item each time and after user submits the form, go to the next position... and for each ng-repeat item, I have to reload the professors dropdown)?
Thank you!
Am I understanding you correctly, you want
ng-repeat class in classes //limit 1 //index i.e. [0] +1 change index after button click so you move to the next class index location?
If your setting a value of professor.id in the class or a property that isn't set or is null/undefined before the button, then just add this to your parent div with the loop of class in classes.
ng-if="!class.propName" //if property/dropdown not set
If this isn't what your looking for please expand on your question.
I have a template here that I want to repeat based on my $scope.dataset.
How do I get ng-repeat to repeat this template for each name?
HTML I have my template as follows
<table>
<tr ng-repeat = "data in dataset">
<td>{{data.name}}</td>
<td>
<div class="progressbar {{data.color}}" ng-style="{width:{{data.width}} + '%'}"
value = "{{data.value}}">
<span id="barValue">{{data.value}}</span>
</div>
</td>
</tr>
</table>
and as you can see, I'm trying to repeat this template inside the table.
dataset is as follows
$scope.dataset=[
{'name':'name1', 'value':34, 'width':34, 'color':'colorRed'},
{'name':'name2', 'value':50, 'width':50, 'color':'colorBlue'},
{'name':'name3', 'value':47, 'width':47, 'color':'colorRed'},
{'name':'name4', 'value':82, 'width':82, 'color':'colorBlue'},
{'name':'name5', 'value':72, 'width':72, 'color':'colorOrange'},
{'name':'name6', 'value':17, 'width':17, 'color':'colorGreen'},
{'name':'name7', 'value':20, 'width':20, 'color':'colorRed'},
]
When I try to use this, nothing pops up.
All I want is for the data to appear for each .name that comes up.
So first question is what am I doing wrong?
Second, is it possible to do all this in a custom directive?
You must be getting $parse error in your console as you are using
{{}} in ng-style
You shouldn't use {{}} interpolation directive inside ng-style directive.
color should be applied as style instead of adding class, you could be applied from ng-style directive.
HTML
<div class="progressbar" ng-style="{width:data.width + '%', color: data.color}"
value = "{{data.value}}">
<span id="barValue">{{data.value}}</span>
</div>