Develop Reference

vuejs - define v-model only when object exists

My select box is working fine when the variable item.ativo_retencao.id exists correctly.
<select name="ativo_retencao" v-model="item.ativo_retencao.id" class="form-control m-input">
<option v-for="ativo in ativos" v-bind:value="ativo.id">#{{ ativo.title }}</option>
</select>
So when it does not exists, I want to not define (or set null) the v-model property.
Is that possible?

you can use an ternary to do this:
<select name="ativo_retencao" :v-model="item.ativo_retencao.id ? item.ativo_retencao.id : ''" class="form-control m-input">
<option v-for="ativo in ativos" v-bind:value="ativo.id">#{{ ativo.title }}</option>
</select>

v-model is just syntactic sugar (code below applies just for select element):
v-model="item.ativo_retencao.id"
..is same as
:value="item.ativo_retencao.id" v-on:change="item.ativo_retencao.id = $event.target.value"
...so if you don't have a value you want to bind to, just don't render the select at all
<select v-if="item.ativo_retencao.id" name="ativo_retencao" :v-model="item.ativo_retencao.id" class="form-control m-input">
<option v-for="ativo in ativos" v-bind:value="ativo.id">#{{ ativo.title }}</option>
</select>

angular2 getting the whole object selected in a select box

In the past I was able to pass out the 'object' that was used for the select options. I'd like to capture that information off a regular select, but I cannot remember how.
So When you do an *ngFor in your select option, you specify a N of N's like this
<option *ngFor="let thing of things" value= {{thing.name}}>
{{thing.family}} - {{thing.name}}
</option>
I'm hoping I can get that 'whole' thing that was selected, by calling a function on change.
<select class="form-control input-sm "
(change)="changeThing($event)"
name="thing"
formControlName="thing" >
<option *ngFor="let thing of things" value= {{thing.name}}>
{{thing.family}} - {{thing.name}}
</option>
</select>
because I want to change some form options based on the 'family' of the thing, not the value that gets passed.
my function looks like this.
changeThing (thing) {
console.log('thing:', thing);
selectedFamily = ??;
}
The $event is probably the wrong thing to be looking at - I can get the value selected there, but I cannot find the whole "thing" that was selected.
Thanks for any help.

You can do that with the help of index
Template Side :
<select class="form-control input-sm "
[(ngModel)]="selectedValue"
(change)="changeThing($event.target.value)"
name="thing" >
<option *ngFor="let thing of things; let i = index;" [value]="i">
{{thing.family}} - {{thing.name}}
</option>
</select>
Component Side :
changeThing(index){
alert(this.things[index].family +' '+this.things[index].name );
console.log(this.things[index]);
}
WORKING DEMO

I hope it will help
<option *ngFor="let thing of things" value= {{thing}}>
{{thing.family}} - {{thing.name}}
</option>

You can use ngModel with ngModelChange
<select [(ngModel)] ="selectedType" (ngModelChange)="changeThing(selectedType)">
<option *ngFor="let thing of things" [ngValue]="thing ">
{{type.name}}
</option>
</select>

Get Checked Only in <Select multiple>

I am trying to get only the checked names in a list of names. Here is my code model:
<select ng-model="selectTopic" ng-change="changedTopic(selectTopic)" ng-options="option as option for option in topics">>
<option value="" disabled>Select a Subject</option>
</select>
<select ng-model="selectDept" ng-change="changedDepartment(selectDept)" ng-options="option as option for option in department">
<option value="" disabled>Select a Department</option>
</select>
<select ng-model="selectUser" ng-options="option as option for option in users" multiple="multiple">
<option value="" disabled>Select a User</option>
</select>
I want to get the selected topic, department, and users. I am currently using: console.log($scope.topics + $scope.departments + $scope.users) but it returns everything. I just want to return the selected items.
Can anyone help me out?

You have to print the ng-models , not the arrays:
console.log($scope.selectTopic);
console.log($scope.selectDept);
console.log($scope.selectUser);
Hope it helps =)

use one object for the model in your form , then you have all the user input in that one object which makes it simple to send to server or to reset form
$scope.userInput={}
<select ng-model="userInput.selectTopic" ng-change="changedTopic(userInput.selectTopic)" ng-options='...'>
<select ng-model="userInput.selectDept" ng-change="changedDepartment(userInput.selectDept)" ng-options='...'>
to see this working put the following in your view temporarily
<pre>{{userInput|json}}</pre>

how to get array elements in angular js?

In html
<select class="element-margin-top" ng-model="vm.selectedRole" ng-options="(roleName,enabled) in vm.roleNames">
<option value="">All Roles</option>{{vm.roles[0]}}
</select>
I want to display all the array elements in select options.I dont understand what is going on in this.It is giving me error related to (roleName,enabled) in vm.roleNames
In js:
var vm = this;
vm.roleNames = ['SuperAdmin','Admin','Retailer','Manufacturer'];
vm.selectedRole = vm.roleNames[-1];
I want first element to be selected by default.

ng-options="(roleName,enabled) in vm.roleNames" in this case, vm.roleNames is an array, so, roleName is the index and enabled is the real "roleName"
So your code should looks like this:
<select class="element-margin-top" ng-model="vm.selectedRole" ng-options="(index,roleName) as roleName in vm.roleNames">
<option value="">All Roles</option>
</select>

try this , for first selected by defult you can use $first
<select ng-model="selectedRole">
<option ng-repeat="name in roleNames "
ng-selected="$first" value="{{name}}">{{name}}</option>
</select>

In html:
<select class="element-margin-top" ng-model="vm.selectedOption">
<option value="">All Roles</option>
<option ng-repeat="item in vm.optionNames" value="{{item}}">{{item}}</option>
</select>
in js:-
vm.optionNames = ['User', 'Account', 'Brand'];
vm.selectedOption = vm.optionNames[-1];
try reading http://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/

ng-Select Option set default value from list if value match using angularJS

I have html.
<select ng-model="user.role" class="form-control" name="role" >
<option value="">Select Role</option><option ng-repeat="role in roles" value="{{role.authority}}">{{role.authority}}</option> </select>
Now roles is a list and role.authority is string. i want to set default selected if role.authority==MYROLE then set to default, which is in role.authority.
How can i do

You have to assign the same value to select model inside controller, in your case it would be something like this
$scope.user.role = $scope.roles[0].authority
or with use of ngSelected
<option ng-repeat="role in roles" value="{{role.authority}}" ng-selected="role.authority == 'defaultValue'">{{role.authority}}</option>