I wrote a little program in Angular using ui-select elements. Here is the html code :
<ui-select ng-model="test.selectedContract">
<ui-select-match >
{{$select.selected.name}} - {{$select.selected.value}} ---- {{$select.selected.id.id}} *** {{$select.selected.policy.info.name }}
</ui-select-match>
<ui-select-choices group-by="groupByLetter"
repeat="contract in (contracts |
orSearchFilter: {id.id: $select.search, policy.info.name : $select.search} |
orderBy: 'name') track by contract.name">
{{contract.name}} - {{contract.value}} ---- {{contract.id.id}} *** {{contract.policy.info.name }}
</ui-select-choices>
</ui-select>
And here is the structure of my contracts object :
$scope.contracts = [{
name: "contract1.00",
value: 10,
id: {
id: 8000,
code: 2
},
policy: {
info: {
name: "test1",
country: "test"
}
}
}, //other contract objects
Finally, there is my plunker code : http://plnkr.co/edit/PigjGCj5ukxscJC7Wl97?p=preview
The problem is that I want to display "All" as a default value (if there is no selection) while my default value in my plunker is : " - ---- *** "
Can you please help me to set this default value please?
Thanks !
You could define a sort of toString function in your controller and put the result of that in the ui-select tag, instead of hard-code dashes and stars. If value is null, it should return "All"
Just set the
$scope.test.selectedContract = {
name: "all",
value: 10,
id: {
id: 8000,
code: 2
},
policy: {
info: {
name: "test1",
country: "test"
}
}
}
DEMO
Related
I have tried to use ng-options in this json array
$scope.new_user = [
{
id_usuario: 0,
usuarioNome: '',
usuarioAD: '',
perfil: [{ master: "Não", id: 0 }, { master: "Sim", id: 1 }],
acesso: [{ restringir: "Não", id: 0 }, { restringir: "Sim", id: 1 }]
}];
<select ng-options="perfil as perfil.master for perfil in new_user" ng-model="perfil"></select>
What I'm doing wrong?
Thanks all
You should check:
<select ng-model="perfil" ng-options="perfil as perfil.master for perfil in new_user[0].perfil"></select>
You ng-model is what is selected.
You should have something like this :
<select ng-options="perfil as perfil.usuarioNome for perfil in new_user" ng-model="selectedPerfil"></select>
To avoid a blank anwser in your selected you should set selectedProfil in your controller :
$scope.selectedPerfil = $scope.new_user[0];
Plunkr : http://plnkr.co/edit/VR4p6n8rbrGZZOCcCrIa?p=preview
I am using angular-ui-select plugin.
I am trying to filter the items based on city, state as well as country.
My data for binding the dropdown has the following structure :
vm.people = [
{ name: 'Adam', email: 'adam#email.com', age: 12,
state: {state:"NY", country:{country:"US"}
}
},
{ name: 'Amalie', email: 'amalie#email.com', age: 12
, state: {state:"ca", country:{country:"US"}
}
},
{ name: 'Estefanía', email: 'estefania#email.com', age: 21
, state: {state:"al", country:{country:"US"}
}
},
{ name: 'Adrian', email: 'adrian#email.com', age: 21
, state: {state:"po", country:{country:"US"}
}
},
{ name: 'Wladimir', email: 'wladimir#email.com', age: 30
, state: {state:"mn", country:{country:"US"}
}
},
{ name: 'Samantha', email: 'samantha#email.com', age: 30
, state: {state:"na", country:{country:"US"}
}
},
{ name: 'Nicole', email: 'nicole#email.com', age: 43
, state: {state:"NX", country:{country:"US"}
}
},
{ name: 'Natasha', email: 'natasha#email.com', age: 54
, state: {state:"NY", country:{country:"US"}
}
},
{ name: 'Michael', email: 'michael#email.com', age: 15
, state: {state:"NY", country:{country:"US"}
}
},
{ name: 'Nicolás', email: 'nicolas#email.com', age: 43
, state: {state:"NY", country:{country:"US"}
}
}
];
I am binding it as follows :
<ui-select ng-model="ctrl.person.selected" theme="bootstrap">
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="item in ctrl.people | propsFilter: {name: $select.search, state.state: $select.search,state.country.country: $select.search} ">
<div ng-bind-html="item.name | highlight: $select.search"></div>
<small ng-bind-html="item.email | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
I am getting this error :
Error: [$parse:syntax] Syntax Error: Token '.' is unexpected,
expecting [:] at column 57 of the expression [ctrl.people |
propsFilter: {name: $select.search, state.state:
$select.search,state.country.country: $select.search}] starting at
[.state: $select.search,state.country.country: $select.search}].
Edit:
I could solve this error by using filter instead of propsfilter & search in whole json. but i dont want to do that as there are many columns in json which I don't even show to the user..
You can have dynamic object names on the left hand side of the object
Change
<ui-select-choices repeat="item in ctrl.people | propsFilter: {name: $select.search, state.state: $select.search,state.country.country: $select.search} ">
to
<ui-select-choices repeat="item in ctrl.people | propsFilter: {name: $select.search, state: $select.search,country: $select.search}
I have a form generated by angular-formly.
I format the date using angular date filter
this.formlyFields = [
{
key: 'fromDate',
type: 'datepicker',
templateOptions: {
label: this.i18n.text('searchCase_FromDate'),
type: 'text',
placeholder: this.i18n.text('searchCase_FromDatePlaceholder'),
required: true,
datepickerOptions: {
format: 'shortDate',
'show-weeks': false,
}
},
expressionProperties: {
'templateOptions.label': '"searchCase_FromDate" | translate',
'templateOptions.placeholder': '"searchCase_FromDatePlaceholder" | translate'
}
}
]
Here is the template I'm using:
<input type="text"
id="{{::id}}"
name="{{::id}}"
ng-model="model[options.key]"
class="form-control"
uib-datepicker-popup="{{to.datepickerOptions.format}}"
is-open="datepicker.opened"
datepicker-options="to.datepickerOptions"
current-text="{{'datepickerCurrent' | translate}}" clear-text="{{'datepickerClear' | translate}}" close-text="{{'datepickerClose' | translate}}" />
When I'm on this view and change the locale the date won't be reformated.
It will if I change the locale before arriving on this page.
I'm changing the locale with angular-dynamic-locale.
It works if in a view I display like this:
<div>{{vm.formlyModel.fromDate | date:'shortDate'}}</div>
But how to have the same rresult with angular-formly ?
Thnaks for your help.
I have a JSON object in the following format:
{
filters: [
{Name: "pork",
Active: true},
{Name: "beef",
Active: true},
{Name: "chicken",
Active: false}
]
}
I am constructing a SELECT list with the following:
ng-options="item.Name for item in filters"
I want to only construct an option if the "Active" key is true. Is there a way for me to do this in the psuedo-JavasScript inside of the Angular directive?
Try ng-options="item.Name for item in filters | filter:{ Active : true }".
I am trying to show a select box inside a ng-repeat and am stuck with the following:
<tr ng-repeat="element in elements" post-repeat-directive>
<td>{{element.name}}</td>
<td>
<select ng-model="element.type"
ng-options="item.id as item.name for item in tipo_items"></select>
</select>
</td>
</tr>
In my controller I have:
$scope.tipo_items = [
{ id: 1, name: 'uno' },
{ id: 2, name: 'dos' },
{ id: 3, name: 'tres' },
{ id: 4, name: 'cuatro' },
{ id: 5, name: 'cinco' },
];
This shows the select items, but no item is pre-selected!
I checked the element.type values and they are correct...
What am I doing wrong?
According to the comprehension expression you defined in the select, you need to use the id value to preselect the item and set it for the model object.
$scope.element = {};
$scope.element.type = $scope.tipo_items[0].id;
DEMO
OK I found the problem...
I was loading the id from the database as json, and the id was a string, not an integer...
this solved the problem:
$scope.tipo_items = [
{ id: '1', name: 'uno' },
...
instead of
$scope.tipo_items = [
{ id: 1, name: 'uno' },
...
This is default behavior by angular select directive. If you'll set ng-model to a default in the ctrl you'll get it preselected.
something like (in the ctrl):
$scope.element.name = $scope.tipo_items[0]