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
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
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>
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.
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
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 {{}}