I am doing a directive using select2. In my screen I will have many select2 objects, so this is why I want to use a directive that I can reuse it many times.
This is the directive:
<div class='form-group'>
<p>{{title}}</p>
<ui-select ng-model="selectedItem" on-select="onChange($item);" theme="bootstrap">
<ui-select-match placeholder="{{placeholder}}">
{{selectedItem.state}}
</ui-select-match>
<ui-select-choices repeat="item in items | filter: $select.search">
<span ng-bind="item.state"></span>
</ui-select-choices>
</ui-select>
Then I can do this to pass the parameters in my index.html file:
<strainer-select
items="strainer.states"
selectedItem="strainer.selectedState"
handler="onStateChange"
title="Estados"
placeholder="Escolha um Estado"
></strainer-select>
My problem is: in select2 I need inform a property of my object to "bind" and be displayed in the view, like so:
{{selectedItem.state}}
But, of course, the property 'state' will not be available in all objects. If I have a "city" object it can be "cityName" or if I want display users it could be just "name" or "userName".
I want avoid to make a interceptor and modify all my data to replicate properties just to fit a generic "name" in the data. If my object is:
{
state: "Sao Paulo",
uf: "SP"
}
I do not want change it to:
{
state: "São Paulo",
uf: "SP",
name: "São Paulo" // replicated from "state" property
}
jus to use inside my directive.
So, I've tried pass the bind property name dynamically to the directive like this:
<strainer-select
items="strainer.states"
selectedItem="strainer.selectedState"
handler="onStateChange"
title="Estados"
placeholder="Escolha um Estado"
bindName="state"
></strainer-select>
And use it in the directive like this:
<span ng-bind="item.{{bindName}}"></span> // didnt work
<span ng-bind="item[{{bindName}}]"></span> // didnt work
<span ng-bind="item['{{bindName}}']"></span> // didnt work
And the ui-select-match looks worst....
<ui-select-match placeholder="{{placeholder}}">
{{selectedItem["{{bindName}}"]}} // didnt work
</ui-select-match>
but with no success.
Does anyone has a clue how I can dynamically change the property name used by ng-bind?
Thank you.
Try
<span ng-bind="item[bindName]"></span>
<ui-select-match placeholder="{{placeholder}}">
{{selectedItem[bindName]}}
</ui-select-match>
Whilst in ng-bind you do not need to escape the use of variables you are writing raw code - hence why you need to quote and direct usages of strings.
Related
I have this ui select:
<ui-select multiple
ng-model="meas.daysSelected"
theme="bootstrap"
close-on-select="false">
<ui-select-match placeholder="days">{{$item}}</ui-select-match>
<ui-select-choices repeat="day in days | filter:$select.search">
<div ng-bind-html="day | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
$scop.days = ['Sun', 'Mon', 'Tue' ... ]
it is in a simple table with angular ng-repeat
<tr ng-repeat="meas in foo= (res.foos | filter: subSearch : strict)">
and I filter it with:
<input type="text" class="form-control" ng-model="subSearch.daysSelected">
The problem is like this: the "daySelected" model is becoming an array when I select an object and then de-select it. the filter of angular just dismisses it and filters it.
So I need help in one of the 2:
make daySelected as a string (when selected it will be: "sun, mon"
or
adjust the filter to work in array
Assuming the search text is going to be like "Mon,Tue" which will filter all the ui-selects which have ["Mon","Tue"] you can write your own filter function and pass that. For example:
<tr ng-repeat="meas in foo= (res.foos | filter: $ctrl.filterDaysSelected">
And in your controller you'd need to create that function:
$ctrl.filterDaysSelected = function(value, index, array) {}
Where you would need to:
Split the value of your search criteria by ","
Validate that each item in your split array exists in the function value parameter
Well, I have a hidden field in my form and trying to validate the ui-select element. I'm using the Angular-Validation plugin, which depends on the jQuery Validate plugin. On submit it shows the error label, but when the hidden fields gets it value from the ng-model, the error is still shown and also i am not able to submit the form.
Here's the html
<ui-select ng-model="noPostData.locaopt.id" theme="selectize">
<ui-select-match placeholder="Select Location">
{{$select.selected.name}}
</ui-select-match>
<ui-select-choices repeat="obj.id as obj in locaoptions | filter: {name: $select.search}">
<div ng-bind-html="obj.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
<input type="hidden" name="subloc_loca" ng-model="noPostData.locaopt.id">
Here's the options
$scope.validationOptions={
ignore: [],
rules: {
subloc_loca: {
required: true
},
message: {
subloc_loca: {
required: "Select location"
},
}
}
If the hiddden field is getting its value, why the error label is not going away. Why is this happening and how can i achieve this. Please help me
Typically, in these situations where a graphical element replaces the default, you have to get creative. In this case there is a input type="hidden" that is presumably replacing the select. Since jQuery Validate does not get automatically triggered when the value of the hidden element changes, you have to programmatically trigger this yourself.
Write a handler that forces validation of the hidden element that contains your value.
$('#Your-Graphical-Select-Element').on('focusout', function() {
$('[name="subloc_loca"]').valid(); // force validation test
});
The Angular API reference docs uses braces [] when defining the $filter service. What do the braces mean in this context?
{{ expression [| filter_name[:parameter_value] ... ] }}
I think it means optional. However, I've seen code written like this:
<select ng-model="query.level" class="input-medium">
<option selected value="">All</option>
<option selected value="introductory">Introductory</option>
<option selected value="intermediate">Intermediate</option>
<option selected value="advanced">Advanced</option>
</select>
<ul>
<li ng-repeat="session in event.sessions | orderBy:sortorder | limitTo:2 | filter:query">
...
</li>
</ul>
And a controller like
$scope.event = {
sessions: [
{
name: 'Blah',
level: 'Advanced'
},
{
name: 'another thing',
level: 'Intermediate'
}
]
}
query is not a custom or pre-built filter. I fail to see the connection between filter:query and the documentation. Is filter an expression that includes a magic variable somehow initialized simply by it's use in ng-model?
I think the confusion is that filter used in this context does not mean "Angular filter" it actually means filter the list. It's the "filter" filter. The part after the colon in this case is not the name of a filter, but the argument to the "filter" filter.
orderBy is a filter.
limitTo is a filter.
filter is also a filter.
You do not write filter:orderBy or filter:limitTo, you just write orderBy or limitTo. So in the this case, they are writing filter, not filter:filter.
To put it another way, query IS NOT A FILTER. query is the argument to the filter filter, which is included in the list of built-in filters: https://docs.angularjs.org/api/ng/filter
I think that was just bad naming on Angular's part.
Please look at the following jsbin. I have a select input that has two options (Ohio, NewYork). Within the ng-options for the Select, I am selecting the entire object and NOT just the name or key value. I need both.
When I select Ohio (for example), the model correctly updates showing the selected object:
"birthState": {
"Key": "1",
"Value": "Ohio"
}
If I add this code to the model within my controller (setting the field to 'Ohio' by default), the select does not reflect this default setting.
What am I doing wrong that is preventing me from giving this dropdown a default value?
You are not able to select because, all objects will have unique id. objects in options array and object assigned in model (in controller) will be different in this way.
To achieve what you wanted, try adding track by option.Key in ng-options, and assign Key for 'birthState' field of model inside controller.
<script type="text/ng-template" id="select.html">
<select required type="number" ng-model="model[options.key]" ng-options="option.Value for option in to.options track by option.Key">
<option value="">Select One</option>
</select>
</script>
inside controller
vm.model = {
"birthState": {Key: '3'}
};
I use the following select. Currently, I get empty options in my select on start. To avoid these empty options in angularJS, I want to preselect the first option in the select. But It do not work. I get an 'Cannot read property 'conditions' of undefined'. Thank you for your tips!
HTML
<select ng-show="rule.field=='Cardiology'" ng-options="c.name as c.name for c in conditions" ng-model="rule.condition" class="form-control input-sm selectCondition"></select>
JS
scope.conditions = [{
name : 'contains',
}, {
name : 'doesn´t contain',
}];
$scope.conditions = {type : $scope.conditions[0].value};
Bind value in model to get selected.
Try like this
$scope.rule.condition=$scope.conditions[0].value;