angular empty object when looping items through this object - javascript

When I paint the following html:
<table >
...
<tr ng-repeat="item in countryItems">
<td ng-repeat="monthName in admin.monthName">
<input class="form-control text-right"
type="number"
ng-model="countryItem[item._id][monthName.text]"
style="width:75px"
value="{{item[monthName.text]}}"
>
</td>
...
</table>
displays values as expected, but dumping values like this:
<pre>{{countryItem | json}}</pre>
only shows
{}
also when posting this scope var "countryItem", the value is the same as the printed in the element.
Strangely when I do mouseover over those inputs, prints just the input I passed the mouse over, so until I didn't pass the mouse over all the inputs the object doesn't get all the values ...
What is wrong? I expect to have the same value in the object which is printed in the table.

countryItem doesn't exist, it should be countryItems
Like so:
{{countryItems | json}}
Or if inside your ng-repeat:
{{countryItems[item._id][monthName.text] | json}}
Also, you shouldn't bind a value to an input that already has an ng-model, since that's the responsibility of the ng-model directive.

Related

How to use a boolean variable on a filter when filtering ng-repeat?

I have difficulty trying to filter an ng-repeat list using a boolean from a select option
I've tried just placing the boolean from select with the {{}} and without the brackets.
<div>
<select ng-model="mybool" ng-options="o.v as o.n for o in
[{ n: 'Not included', v: false }, { n: 'Included', v: true }]">
</select>
</div>
This is the html in the table
<tr ng-repeat="item in model.items | filter:{enabled:mybool}">
<tr ng-repeat="item in model.items | filter:{enabled:{{mybool}}">
this is in the javascript file
$scope.mybool = true;
The list no longer displays when using the mybool variable. It only shows If I use the datatype true or false. I expect to see only the options where enabled is set to true or set false depending on what the option selected is.
<tr ng-repeat="item in model.items | filter:{enabled:true}">
<tr ng-repeat="item in model.items | filter:{enabled:false}">
these work but obviously they aren't dynamic since they are not linked to the select option.
I am new to angular and come from a java background so this is confusing me
There is no need of double braces into ng-repeat expression. The first one is the right one:
<tr ng-repeat="item in model.items | filter:{enabled:mybool}">
Just make sure that $scope.model is not undefined and $scope.model.items have the proper values.
The rest code seems ok and should work check this working example: fiddle example

Show Message if results are 0

I have a Filter for a Table and want to show no Results if the filter found nothing.
In short the necessary Code:
<th>Keys
<input ng-model="k" id="search" class="form-control" placeholder="Suche...">
</th>
<tr dir-paginate="v in result = ($ctrl.langV | filter:{Name:k}) | orderBy : 'Name' |itemsPerPage: 10">
<td class="td-keys">{{v.Name}}
</td>
<td ng-if="result.length === 0">Keine Ergebnisse</td>
I have found allready here a few Examples:
Show message if text filter return no result in ng-repeat
How to show a message when filter returns nothing in ng-repeat - AngularJS
AngularJS - placeholder for empty result from filter
But none of them working?
A simple
<td ng-show="result.length">Keine Ergebnisse</td>
Is showing me the extra td because results are found. But the opposite for no Results never works.
Thx for Solutions :)
Why don't you use like this... when no results, this would show.
<td ng-if="!result.length">Keine Ergebnisse</td>
In the three examples you referenced, they are displaying the no result message outside of the ng-repeat. You are display the no result message inside the ng-repeat. Try taking that statement out of the scope of the ng-repeat and see if it works then.
At first you have to give an alias to your "results", something like filteredItems, as below:
<tr dir-paginate="v in $ctrl.langV | filter: { Name: k } | orderBy : 'Name' | itemsPerPage: 10 as filteredItems">
Then, you can use it:
<td ng-if="!filteredItems.length">No results</td>

Angular ng-repeat multiple row table with select

So I have this table with select boxes on each row. The problem is that when I make a change in one select box, all of them get changed showing the same value. What I need is to unbind all select boxes to be able to have different selections on each one of them.
Code goes like:
<tr ng-repeat="item in userMappings.items" ng-model="item.mapped">
<td class="col-md-3" ng-model="mappingType.name">
{{item.idsport}}, Game Type {{item.idgametype}}, {{item.name}} (Current limit {{item.value}})
</td>
<td class="col-md-3 mapType" style="padding-bottom: 25px; padding-left: 15px" >
<h4>Mapping Type: <span style="font-size:0.8em">{{selectedType}}</span> </h4> <br />
<select ng-model="mappingType.name" ng-change="which($index); selectedRow()" ng-options="item.name for item in mappingType"></select>
</td>
</tr>
When you use ng-model to bind to mappingTypes.name it will modify the property on the controller scope because that's where it's defined. mappingTypes isn't part of ng-repeat's scope so it goes through the scope inheritance chain and updates it there. So when you select an item, mappingTypes is now an array with a name property. All of your items bind to that same array, so they all have the same value.
If you want to only change a specific item in ng-repeat, you should use something like item.mapping. if you modify anything other than item it's modifying the entire controller's scope.

AngularJS filter on multiple deep nested properties

I've couple of select fields on basis of which I want to filter data. Here is working plukr: http://plnkr.co/edit/VUnAoL2Sl0IqGcZqHbbi?p=preview
If I select any one value from select, it works fine, but when I select the other one it don't show any data.
These filters are going to be dynamic (depending on number of columns) So I want that in HTML I could use it with single filter declaration like: <tr ng-repeat="row in data | filter:{columns: filt}">
Not like: <tr ng-repeat="row in data | filter:{columns: filt.something} | filter: {some: thing}">
<tr ng-repeat="row in _data = (data | filter:{columns: {dealType:filt.dealType}}) | filter:{columns:{primaryUse:filt.primaryUse}}">
<td ng-repeat="column in row.columns">
{{column[column.header]}}
</td>
</tr>
I have got the same issue and it worked with a change in your code as above. Thanks

AngularJs, how to assign dynamic model name

I wanna create a dynamic table (say 5X5 ) containing a checkbox matrix, and assign each checkbox with a model,
<tr ng-repeat="parentItem in Items>
<td>{{parentItem.name}}</td>
<td ng-repeat="childItem in Items>
<input id="{{ parentItem.id }}_{{childItem.id}}" type="checkbox" ng-true-value="1" ng-false-value="0" ng-model="data['{{ parentItem.id }}_{{childItem.id}}']">
</td>
</tr>
In the controller, a data object is defined as $scope.data={};
so what I expect is that each checkbox will end with a model in a form like data['1_3'] or data['2_4'],
I tried many ways but the model just could not be bound correctly.
Actually, tried this way
data[parentItem.id],
it worked, but no idea how to concatenate two dynamic items.
I didn't test it but ng-model="data[parentItem.id + '_' + childItem.id]" should work.
Generally for ngModel you don't need to use {{}}

Categories