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.
Related
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'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.
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.
I started to work with Angular, it's pretty good to implement, I stuck with a single issue at ng-click
I am getting data dynamically and showing with ng-repeat, and I want to update the data at pencil click and for it I am using input text element, but when I click on pencil It's opening all the text fields
Here is my HTML code
<
div ng-repeat="item in scroller.items track by $index">
<div class="secHead text-center">
<button class="common btnDarkGrey" data-ng-hide="hideCatButton">{{item.category_name}}</button>
<input type="text" id="focus-{{$index}}" class="common btnDarkGrey editDashboardCategory" name="editCategory" value="" data-ng-model="item.category_name" data-ng-show="hideField">
<span data-ng-click="updateCategory(item.category_id,item.category_name,$index)" class="chkOneDone" data-ng-show="hideOkButton">Done</span>
<div class="pull-right">
</div>
</div>
</div>
And here I Angular code
$scope.updateCategory=function(category_id,updated_cat_name, $index){
Category.updateCat($rootScope,$scope,$index,$http,$timeout,updated_cat_name,old_cat_name,category_id);
};
$scope.updatePen=function($index){
old_cat_name=$scope.scroller.items[$index].category_name
$scope.hideField=true;
$rootScope.hideOkButton=true;
$rootScope.hideCatButton=true;
};
I created a Category service to perform task like update
I didn't get any proper solution yet.
Can anybody help me?
Thank You.
If you only want to hide/show one of the elements in the list you need to specify that in some fashion. Right now you have a three rootScope booleans:
$scope.hideField=true;
$rootScope.hideOkButton=true;
$rootScope.hideCatButton=true;
being set for the entire list, and you need to set a show properties on each individual in the list.
In your controller function you can do something like this before you expect a click:
//normal for loop so that you have the index
for(var i=0; i < $scope.scroller.items.length; i++){
$scope.scroller.items[i].show = false;
}
Then you can do something like this to actually show the fields:
HTML:
div ng-repeat="item in scroller.items track by $index">
<div class="secHead text-center">
<button class="common btnDarkGrey" ng-hide="!item.show">
{{item.category_name}}</button>
<input type="text" id="focus-{{$index}}" class="common btnDarkGrey editDashboardCategory" name="editCategory" value="" ng-model="item.category_name" ng-hide="!item.show">
<span data-ng-click="updateCategory(item.category_id,item.category_name,$index)" class="chkOneDone" ng-show="item.show">Done</span>
<div class="pull-right">
</div>
</div>
</div>
Controller:
//controller declaration --
$scope.updatePen = function(index){
$scope.scroller.items[index].show = true;
};
It's my understanding that you need all three properties to show once a click happens, so I condensed all the show properties into one single show property.
Your view only sees that hideField is true and performs that action for all of the items in your array. I hope this helps!
I'm an angularjs newbie building my first app. I have a list of users that I can filter and sort:
<button ng-click="order='lastname'; reverse=!reverse">Sort by name</button>
<button ng-click="order='id'; reverse=!reverse">Sort by id</button>
<input type="text" ng-model="filter.user">
<ul class="userlist" ng-class="{blur: currentUser}">
<li ng-repeat="user in users | orderBy:order:reverse | filter:filter.user">
{{user.id}} / {{user.firstname}} {{user.lastname}}
Show details
<div ng-click="showDetails(user)">Show details in overlay</div>
</li>
</ul>
<div ng-show="details">
<div ng-click="details=!details">close</div>
{{user.custom}}
</div>
<div ng-show="currentUser" id="overlay">
{{currentUser.firstname}} {{currentUser.lastname}} {{currentUser.custom}}
<div ng-click="closeOverlay()">close</div>
</div>
I can click on a user to get his details. Now I want to realize the following scenario: When I press the enter key in the filter text input I want to show the details of the first <li /> in the list at the current time. So in jQuery I would bind a keypress event to the input which would check for the key code (13) and then would trigger: $('li').eq(0).click() which would call showDetails() on that particular user - easy.
How can I build such functionality with angular? I tried using the ng-keypress directive which lets me bind a function to a certain keypress but now I'm stuck because I don't know how to trigger the showDetails() function on the first element. Any help greatly appreciated!
This is a workaround you can give a try for the time being: make your ng- keypress handler create a list of your filtered results (that is, reapply your filters on a copy of your user list in your controller) and then call the showDetails for the first egg element of that list.
Is it ugly? Yes. It's it a bad decision if you are working with big lists? Certainly. But it will get you going till you find another way / better stackoverflow answer.
The following should work. Inside your ng-keypress handler set a property that enter was pressed, e.g. enterPressed. Then use ng-init as follows:
<li ng-init="isFirst($first, user)" ng-repeat="user in users | orderBy:order:reverse | filter:filter.user">
{{user.id}} / {{user.firstname}} {{user.lastname}}
Show details
<div ng-click="showDetails(user)">Show details in overlay</div>
</li>
And then in your controller have something like:
$scope.isFirst = function(first, user) {
if (first && enterPressed) {
enterPressed = false;
$scope.showDetails(user);
}
}
I figured out a pretty elegant solution:
In the ng-repeat you can assign an additional variable (I called it filteredUser to the current result set:
<li ng-repeat="user in (filteredUser = (users | orderBy:order:reverse |
filter:filter.user))" ng-click="showDetails(user)">
This way it is super easy to access the first item in that result set (filteredUser[0]) and pass it to a function:
<input type="text" ng-model="filter.user" ng-keypress="$event.keyCode == 13 ?
showDetails(filteredUser[0]) : null">