I am trying to create a chat box in angular, I made it some how but I feel the code is wrong when I click the members it show different member. Please someone correct the code here the link to Plunkerlink
$index will give you the index of the ordered item in UI(After Applying ngRepeat and orderBy) not in the index of the item in the data array. To elaborate this behavior, When I select the artist name "Hassum Harrod" the $index will return me the value as 2 but the same data is available at the index 3 from your data.json. You can pass the item itself to your AppendText(item) . I have modified your plnkr.
I hope it helps
Related
Hi I am using AngularJS on a WordPress site and when displaying custom field values using Angular tags in my partials HTML file such as {{post.manualest}}, it displays as ["1,500,000"]
How can I remove [" "] so that it shows only 1,500,000?
Since {{post.manualest}} contains an array you need ng-repeat
<p ng-repeat="tag in post.manualest">{{tag}}</p>
The ngRepeat directive instantiates a template once per item from
a collection. Each template instance gets its own scope, where the
given loop variable is set to the current collection item, and $index
is set to the item index or key.
https://docs.angularjs.org/api/ng/directive/ngRepeat
The data you received (in manualest key) is an Array. So either you can use the ng-repeat as #Vicky suggested or you can simply write in your HTML:
{{post.manualest[0]}}
Edit: Like #FuzzyTree already mentioned in the comment.
I have this codepen. I need to change the value of 'totalItems' after the filter. I'm trying to do it like this inside the filter:
scope.totalItems = scope.filteredlist.length;
But the value doesn't changes. I read that I should do something like this plnkr (calling the filter again inside my controller), but I don't know how to adapt it to my code.
PS: For test the filter, try to type something in the search box, like 'o'.
You can store the result of the filtered array in a variable using the syntax item in items | filter:x as results
variable in expression as alias_expression – You can also provide an optional ?>alias expression which will then store the intermediate results of the repeater >after the filters have been applied. Typically this is used to render a special >message when a filter is active on the repeater, but the filtered result set is >empty.
For example: item in items | filter:x as results will store the fragment of the >repeated items as results, but only after the items have been processed through >the filter.
Then you can use {{results.length}} to get the length of the filtered results.
https://code.angularjs.org/1.3.10/docs/api/ng/directive/ngRepeat
After looking at your pen in more detail, you can get the totalItems value in your scope by just making a one-line change in your code. In your pagination filter, you are doing
scope.totalItems = scope.filteredlist.length;
But the length that you want is actually of the input so if you change it to this, then totalItems will have the value that you expect
scope.totalItems = input.length;
I don't like that solution as much since you end up sorta polluting some other scope within the pagination filter but it gives you your answer. (I just would need more time that I have right now to come up with a "cleaner" solution)
Please look at to my code here: http://jsfiddle.net/Rousnay/rVnsJ/
Everything is working good. its giving me list of 10 movies from external JSON source.
But i want to limit this movie listing. i want to show only first 5 movies in output.
how can i do this?
Can anyone help me with jsfiddle example please.
The returned object is an array. Use splice() to remove all elements whose index greater than given index:
Updated fiddle: http://jsfiddle.net/rVnsJ/2/
You just need to add slice to the returned array
$('#featuresr').html(template(data1.slice(Math.max(data1.length - 5, 1))));
http://jsfiddle.net/rmindel/rVnsJ/1/
I have a global controller in my AngularJS application which provides me with a array containing Attendee objects. Want i want is to modify my CourseRegistration Model which contains one specific attendee object. In the edit window I d like to get a dropdown with all possible attendees whereas there should be the current attendee selected.
I have the following code in my html:
<select ng-model="courseRegistration.attendee" ng-options="attendeeSelectItem.name for attendeeSelectItem in attendeeSelectItems"></select>
If I print out courseRegistration.attendee with JSON.stringify and do the same with the corresponding option they print out the same object (same id, same name etc.). But if I do something like (courseRegistration.attendee == attendeeSelectItem) for the two identical objects, then I get false.
So my question is how can I make sure that the currently selected item (stored in courseRegistration.attendee) gets matched with the corresponding object in my list (which is used by options) ?
Thanks a lot in advance.
JSFiddle: http://jsfiddle.net/2ddCy/
Greets
Marc
Essentially when you use an array of objects to populate a select, it selects the entire object, not just the one item you're seeing in the select list.
See this question for detail and example code: Problems when using ng-options and ng-switch together
I'm assuming that you've got something like the following in your controller?
$scope.courseRegistration = {attendee: {id: 2, name: "A Person"}}
If so, the reason the comparison fails is that although the object may have the same properties as the one currently selected, it refers to a different object in memory and therefore isn't classed as equal.
Now as a quick hack you could stringify them and then compare, however the correct approach would be either to set the current value by key:
$scope.courseRegistration = {attendee: attendeeSelectItems[1]};
Or just store the id/name and set your ng-options condition to bind to just that value:
$scope.courseRegistration = {attendee: 1};
<select ng-model="courseRegistration.attendee" ng-options="attendeeSelectItem.id as attendeeSelectItem.name for attendeeSelectItem in attendeeSelectItems"></select>
Consider this jsfiddle.
I can't think of a way to ensure that if row one in the above example has already been selected in the dropdown that the next row would be prevented from selecting the same value.
I think that my problem here is that when the dropdown click event fires, the subscriber does not monitor this change when the child value has changed. Anyone able to assist?
viewModel.actualMetrics.subscribe(function(newValue) {
if (newValue) {
$.each(viewModel.actualMetrics(), function(n, item) {
if (item.MetricTypeId() == newValue.MetricTypeId)
alert("already selected this Metric");
});
}
Here is a basic sample of one way to do what you want: http://jsfiddle.net/rniemeyer/3cpUp/
Here is your sample with it: http://jsfiddle.net/rniemeyer/8bQmq/
The basic idea is that you have your list of choices, then you create a dependentObservable that is an index of the currently used choices. This saves some looping through the current choices when building each rows options. This index could be an object or an array. I used an object, but you could use an array as well with the id as the index.
Then, on each item, you could have a dependentObservable to store the filtered choices for that item. However, I used a function instead, because it does not seem like a property that is really important to the view model and bindings are implemented using dependentObservables, so you get the same effect without having the choices show up when you send it toJSON. The function loops through all of the choices and includes only the choices that do not appear on another line by checking its own value and the index.