We Keep Coding

nested ng-repeat that one depend on the other

I have an issue with angular, I want to use two nested ng-repeat in a data table where the first get the data, and the second get the name of field to be retrieved from the data (retrieved in the first ng-repeat)
here is what I tried to do with code :
<table md-table flex-order-gt-sm >
<thead md-head>
<tr md-row >
//1st : get the name of fields, not a problem
<th md-column ng-repeat="field in fields">{{item.name}}</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="item in items">
<td md-cell ng-repeat="field in fields" >
//here is the problem I want to get the item that it's field name is field
{{item.{{field}} }}</td>
</tr>
</tbody>
</table>
for example if fields contain :{'a','b','c'}
and items contains {'a':'1','b':'2','c':'3'};
I want for example for the 1st iteration of {{item.{{field}} }} to return 1

Use toString() to retrieve the scope data in an scope object.
<tr md-row ng-repeat="item in items">
<td md-cell ng-repeat="field in fields" >
{{item[field.toString()]}}
</td>
</tr>
Here is the plunker

As an alternative you could also use a filter:
<td md-cell ng-repeat="field in fields | filter: { name: 'field' }">
</td>

You need to get fields collection according to item of items collection after
getFieldsByItem(item)
Then you can get field from fields collection
{{field}}

Filter on a single column value using AngularJS

I've created an AngularJS application with a input for filtering the <tbody>'s <tr>.
Right now my table is filtering on both Country and City - I want it to only filter on Country. I've tried a lot of variations of filter:{Country: Search} but it doesn't seem to be working.
Thanks to user edisoni.1337 I have an updated working example using AngularJS 1.2.1 (the one seen below).
var app = angular.module('myApp', []);
app.controller('callCtrl', function($scope)
{
$scope.stuff = [{"House": {"Country": "Denmark", "City": "Copenhagen"}}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="callCtrl">
<input type="text" ng-model="Search">
<table>
<thead>
<tr>
<th>Country</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in stuff | filter : {'House.Country' : Search}">
<td>{{x.House.Country}}</td>
<td>{{x.House.City}}</td>
</tr>
</tbody>
</table>
</div>
CDN for 1.5.6:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

Here you have a working jsfiddle
<tr ng-repeat="x in stuff | filter : {'House.Country' : Search}">
<td>{{x.House.Country}}</td>
<td>{{x.House.City}}</td>
</tr>
Also read this article for better understand
http://www.w3schools.com/angular/ng_filter_filter.asp

This works on 1.5.6 with few changes on the code above: http://jsbin.com/zuxokuy/edit?html,js,output

Using ng-switch to populate a table

I'm using a Angular.js on the front end to populate a table. I want to use ng-switch to display only data that has specific data in one column, for example only show ‘week 1’ data from a list of a NFL schedule, where one column in the data is Weeks.
So right now this code doesn't show anything in the table. If anyone could help explain this it would be greatly appreciated. Maybe I should be using ng-if ? Maybe I should have a button to press to show week 1, week 2 etc.. What's the best solution for this type of situation?
Here's the controller..
// #########################
// Predictions Controller
// #########################
BLV_app.controller('PredictionsController', function($scope, PredictionsFactory, $routeParams) {
PredictionsFactory.getPredictions(function(data) {
$scope.predictions = data;
});
});
Here's the factory..
// ---------------------------
// Prediction Factory
// ---------------------------
BLV_app.factory('PredictionsFactory', function($http) {
var factory = {};
var predictions = [];
factory.getPredictions = function(callback) {
$http.get('/predictions').success(function(output) {
predictions = output;
console.log("prediction factory", predictions);
callback(output);
});
};
return factory;
});
Here's the html..
<table class="table-striped" id="table-style">
<thead id="table-header">
<tr>
<th class="text-center">HomeTeam</th>
<th class="text-center">AwayTeam</th>
<th class="text-center">Prediction</th>
<th class="text-center">Result</th>
</tr>
</thead>
<tbody ng-repeat="predict in predictions" >
<div ng-model="predict.Week"></div>
<tr ng-switch="predict.Week">
<div ng-switch-when="1">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ predict.HomeTeam }}</td>
<td ng-if="$even">{{ predict.HomeTeam }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ predict.AwayTeam }}</td>
<td ng-if="$even">{{ predict.AwayTeam }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ predict.Prediction }}</td>
<td ng-if="$even">{{ predict.Prediction }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ predict.Result }}</td>
<td ng-if="$even">{{ predict.Result }}</td>
</div>
</tr>
</tbody>
</table>

I believe there is something wrong with ng-repeat and ng-switch when binding to elements like tbody and td. Replace them with div and li makes it working properly: JSFiddle.
<div ng-repeat="predict in predictions">
<div ng-model="predict.id"></div>
<div ng-switch="predict.id">
<div ng-switch-when="1">
<li ng-if="$odd" style="background-color:#f1f1f1">{{ predict.name }}</li>
......
Changing from <div ng-repeat="predict in predictions"> to <tbody ng-repeat="predict in predictions"> makes it not working: JSFiddle.
In ng-repeat docs and ng-switch docs, it says:
Usage
as attribute:
<ANY
ng-repeat="">
...
</ANY>
But obviously they cannot be used on ANY elements.

Check if value insert exist in dropdown with angularjs

I have a input with an autocomplete with angularjs. This autocomplete is from a json that is represented by a table in a dropdown. I can filter the results and click the correct value but i would check if the user type some value that is not in the dropdown with an error message. Here is the code:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="uk-form-row uk-width-1-1" data-ng-repeat="items in inputList.getinputList">
<input ng-model='item.value' type="text" placeholder="Choose"/>
<!-- WORKS OK -->
<div class="uk-parent" data-uk-dropdown="{mode:'click'}">
Nav item - Works OK
<div class="uk-dropdown uk-dropdown-navbar" style="top:50px">
<table>
<thead>
<tr>
<th>First Value</th>
<th>Second Value</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="item in numberList.getList | filter:item.value" ng-click="setSelected(item)">
<td>{{item.first}}</td>
<td>{{item.last}}</td>
</tr>
</tbody>
</table>
</div>
</div>
The angularjs part
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.item={}
$scope.numberList={}
$scope.numberList.getList=[{'first':'Jon','last':'skeet'},{'first':'naeem','last':'shaikh'},{'first':'end','last':'game'}]
$scope.inputList={}
$scope.inputList.getinputList=[{'firstA':'AAA','lastB':'BBBB'}]
$scope.idSelectedVote = null;
$scope.setSelected = function (idSelectedVote) {
$scope.idSelectedVote = idSelectedVote;
$scope.item.value=idSelectedVote.first+' '+idSelectedVote.last;
//alert(idSelectedVote);
};
}
I created a fiddle here:
http://jsfiddle.net/8y48q/22/

You can use
<tr ng-show="(numberList.getList | filter:item.value).length == 0">
<td>Nothing here!</td>
</tr>
Fiddle

AngularJS : ng-repeat orderby error in custom directive

I have a directive that creates a list, I'm trying to get the column sorting to work, so I created another directive for sorting the columns.
I get this error in the console while I'm trying to set up an orderby filter on that list:
http://errors.angularjs.org/1.2.0rc1/$injector/unpr?p0=orderbyFilterProvider
here's my plunker: http://plnkr.co/edit/SiBDuylEv1LUCuWCv5Ep?p=preview
here's where the orderby is:
<table>
<tr>
<th ng-repeat="column in columns">
<sort-by onsort="onSort" sortdir=filterCriteria.sortDir sortedby=filterCriteria.sortedBy sortvalue="{{column.value}}">{{column.title}}</sort-by>
</th>
</tr>
<tr ng-repeat="item in set | orderby:sortBy:reverse" ng-class="getClass(item)" ng-click="selectItem(item,$event,$index)" ng-dblclick="details(item)">
<td ng-repeat="column in columns">{{item[column.value]}}</td>
</tr>
</table>