Develop Reference

How to preselect a specific element from dropdown using ng-repeat

This is my html code:
<select id="selectFileType" ng-model="instance.fileType" required>
<option ng-repeat="(key, value) in fileTypes" id="key" value="{{key}}">{{key}} ({{value}})</option>
</select>
I am using a map of items to fill the list with information - now I want to pre-select a specific element based on the key but all the solutions I found didn`t work.
E.g. I tried to use the id field to use something like:
document.getElementById("A").selected = true;
Does someone have an idea what I should do?
Thanks and have a nice day

Use the ng-selected directive to set your pre-selected option.
angular.module('myApp', [])
.controller('ctrl', function($scope) {
$scope.vm = {
priceTypes: [{
id: 3,
name: 'pound'
},
{
id: 5,
name: 'Yen'
},
{
id: 6,
name: 'dollar'
}
]
};
//select model value
$scope.localModel = {
priceType: $scope.vm.priceTypes[1]
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<select ng-model="localModel.priceType">
<option
ng-repeat="item in vm.priceTypes as item"
ng-selected="localModel.priceType.id == item.id"
value="{{item}}"
>{{item.name}}</option>
</select>
<div>
priceType: {{ localModel.priceType }}
</div>
</div>

How to filter ng-repeat by property value?

When iterating a list with ng-repeat, how can I add a condition/filter by a property of those items.
Example (of course there are several items in real world):
{"items":[{"type":"xxx"}]}
I only want to show the item where type!='test'.
The following just prints nothing:
<ul ng-repeat="item in items | filter: (item.type != 'test')">
Whereas if I remove the filter, all items are printed, of course.
Also, if possible, how could I create a condition that checks for multiple type values not being permitted?

Simple, use a function in the filter expression.
angular.module('app', [])
.controller('AppCtrl', function($scope) {
$scope.items = [{
"type": "xxx"
}, {
"type": "test"
}];
$scope.filterFn = function(value) {
return value.type !== 'test';
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl">
<ul>
<li ng-repeat="item in items | filter: filterFn">{{item.type}}</li>
</ul>
</div>
If your data schema changes just update the filter function.
You could also use object notation
angular.module('app', [])
.controller('AppCtrl', function($scope) {
$scope.items = [{
"type": "xxx"
}, {
"type": "test"
}];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl">
<ul>
<li ng-repeat="item in items | filter: {type: '!test'}">{{item.type}}</li>
</ul>
</div>
but this has some limitations like not suporting primitive value filters(it expects an object with properties as the item) and the same filter cannot be specified multiple times(something like {type:"!test!xxx"})

You could change your ng-repeat to read like this:
<ul ng-repeat="item in items | filter: {type: '!test'}">
In order to provide multiple type values you can create your own filter for reusability like so:
app.filter('typeFilter', function(){
return function(arr,criteria){
if(!angular.isDefined(criteria) || criteria == ''){
return arr;
}
return arr.filter(function(curr){
return criteria.indexOf(curr.type) == -1;
});
}
});
and then change your ng-repeat statement to read:
//List array of criteria...
<ul ng-repeat="item in items | typeFilter:['test'] ">

Angular - Get ng-repeat object

I need to get the current object out of an ng-repeat on ng-click, I can't use $index because I'm using orderBy and therefore it gives me the wrong index relative to the scope object. Idealy I want to be able to click on the object (thumbnail) and have $scope.activePerson gain all that objects values.
My data is structured as follows:
[
{
'name': 'john'
},
{
'name': 'toby'
},
{
'name': 'sarah'
}
]
This is very much simplified, my real objects have 30+ KV pairs and subobjects. There are 10 objects that I'm repeating from (in batches of 4).
My current HTML is:
.item.fourth(ng-repeat="person in people | orderBy:'-name' " ng-show="$index <= 3" nid="{{person.guid}}"
Thanks

It's just person in ng-repeat="person in people";
I'm not sure what kind of markdown you're using, you definitely don't have html there, but you want something like:
<div
ng-repeat="person in people | orderBy:'-name' "
ng-show="$index <= 3"
nid="{{person.guid}}"
ng-click="activePerson = person">
</div>
Note that ng-repeat creates a child scope, so you'll want to have activePerson already set in the parent scope.

You can just use orderBy and copy the current object from ng-repeat, see this plunkr. Relevant code:
Controller
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.stuff = [
{
'name': 'john'
},
{
'name': 'toby'
},
{
'name': 'sarah'
}
];
$scope.setActivePerson = function (obj) {
$scope.activePerson = obj;
};
});
View
<body ng-controller="MainCtrl">
<div ng-repeat="thing in stuff | orderBy: 'name'">
<input type="radio" ng-click="setActivePerson(thing)" />
{{ thing.name }}
</div>
<br />
<div ng-model="activePerson">Active: {{ activePerson.name }}</div>
</body>

Nested ng-option inside angular ng-repeat

Im currently trying to nest a <select> inside a div with a ng-repeat
something like this:
<li ng-repeat="item in items >
<div class="row">
<div class="col-xs-7">
<span ng-bind="item.Name"></span>
</div>
<div class="col-xs-4 modal-body--ul--li__dropdown_container">
<select ng-model="typemodel" >
<option ng-repeat="usertype in item.userGroups"></option>
</select>
</div>
<div class="col-xs-1">
<a ng-click="add(item)"></a>
</div>
</div>
</li>
In the controller im adding the item to a new list with selected items. I also want to add the value from the dropdown as a new value to the list in the controller.
$scope.add = function (item) {
//New value with the value from the dropdown
item.recipientType = typemodel;
$scope.selected.push(item);
};
The list :
$scope.items = [
{
"Name":"Name1",
"userGroups":[
{ "type": "gruop1" },
{ "type": "gruop2" },
{ "type": "group3" }
]
},
{
"Name":"Name2",
"userGroups":[
{ "type": "gruop1" },
{ "type": "gruop2" },
{ "type": "group3" }
]
}
]
In short i need the selected value from the dropdown when i hit the "add", the value of the current typemodel.
This is how it looks now, but it dont work. I know i have to get the correct model and maybe track the items list by $index, but after searching the web the whole day for a solution, im still stuck!
All help is appreciated.
-Thanks!
ps. please comment if something is missing from the question, or something more is needed to solve this.

First, change your dropdown list to
<select ng-options="usertype in item.userGroups" ng-model="item.recipientType">
Then when you trigger the add function, item's property recipientType is already set.
$scope.add = function (item) {
console.log(item.recipientType);
$scope.selected.push(item);
};

How to populate the list of all countries into select multiple and then determine which ones were selected

In my Angular app I have a task of presenting to the user a "select multiple" list of ALL countries, and, after they make their multiple selections, to be able to determine which countries were selected.
I understand how to use ng-repeat inside of the tag, but, I don't know how to properly populate my $scope.countries model array in my controller. ( my only guess is to have the entire country list in a database, and then use ng-init to push all records onto the $scope.countries array, but I'm not sure if this is the best way to do this)
My second challenge is to be able to iterate over the select object, after one or more items were selected, and determine which once were selected.
Currently, my select looks like this:
<div class="form-group">
<label for="selectbasic">What country is the data for</label>
<div>
<select type="text" class="form-control multiselect multiselect-icon" multiple="multiple" ng-model="SelectedCountries">
<option ng-repeat="country in countries">
{{country.name}}
</option>
</select>
</div>
</div>
And my controller looks like this:
$scope.countries = [
{
name: "US"
},
{
name: "UK"
},
{
name: "France"
}
];

Try this: http://jsfiddle.net/tarris/6S2Nk/
Here's the gist of it:
<div ng-app="myApp">
<div ng-app="myApp" ng-controller="con">
<div ng-repeat="item in countries">
<input type='checkbox' ng-model="item.checked" />{{item.name}}
</div>
<button ng-click="checkit()">Check it</button>
</div>
</div>
and the javascript:
var myApp = angular.module('myApp', []);
myApp.controller('con', ['$scope', function($scope){
$scope.countries = [
{id:'us', name: 'United States', checked: false},
{id:'fr', name: 'France', checked: false},
{id:'sw', name: 'Sweden', checked: true}
];
$scope.checkit = function(){
var list = [];
for(var p in $scope.countries){
if($scope.countries[p].checked){
list.push($scope.countries[p].name);
}
}
alert(list);
};
}]);