Develop Reference

How to reset the Angularjs ui-select component all selections without red color error highlight when ui-select marked as required

I'm trying to reset all selection of angularjs ui-select.
but ui-select marked as required field
.so that when I set the ui-select element as undefined as shown below.
$scope.country.selected = undefined;
ui-select element indicates a validation error with red colour.Anyway, i want to reset selection without prompting validation error with the existing required attribute.
<ui-select required ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
<ui-select-match placeholder="Select or search a country in the list...">
<span>{{$select.selected.name}}</span>
<button class="clear" ng-click="clear($event)">X</button>
</ui-select-match>
<ui-select-choices repeat="country in countries | filter: $select.search">
<span ng-bind-html="country.name | highlight: $select.search"></span>
<small ng-bind-html="country.code | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>

Add a form as bellow then you can setPristine to reinitialize the status of the form (You can also see the plunker link to see the working example):
<form name="formName" novalidate>
<h3>Selectize theme</h3>
<p>Selected: {{country.selected}}</p>
<ui-select required ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
<ui-select-match placeholder="Select or search a country in the list...">
<span>{{$select.selected.name}}</span>
<button class="clear" ng-click="clear($event)">X</button>
</ui-select-match>
<ui-select-choices repeat="country in countries | filter: $select.search">
<span ng-bind-html="country.name | highlight: $select.search"></span>
<small ng-bind-html="country.code | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
</form>
JavaScript
$scope.clear = function($event) {
$event.stopPropagation();
$scope.country.selected = undefined;
$scope.formName.$setPristine();
};
You can see the Working example plunker in here
The angular 1.3 introduced the touched concept:
touched vs pristine: touched means the field has been blurred while pristine means the field's value has been modified. Angular's docs note that "Setting a form controls back to their untouched state is often useful when setting the form back to its pristine state."
$scope.formName.$setUntouched()
I hope this can help

How to dynamically change the choices of ui select in angularjs

I have a couple of UI Selects, based on the selection of the first one I want to load the choices into the second one. How do I go about doing it dynamically for the second one. I did do some extensive searching but could not find anything.
<ui-select append-to-body="true"
ng-model="requirementChoice" theme="bootstrap"
ng-disabled="disabled" close-on-select="true"
title="choose a requirement"
theme="selectize"
name="requirements" id="requirements">
<ui-select-match placeholder="
{{translations.SLA_CHOOSE_REQUIREMENTS}}">
{{requirementChoice}}
</ui-select-match>
<ui-select-choices repeat="choice in requirementTypes |
filter:$select.search">
{{choice}}
</ui-select-choices>
</ui-select>
This is the first of my ui select which has the choices and based on these choices I want to load the data into the second UI select is there a way to achieve this?

Call a function on-select of the first ui-select and set the second ui-select accordingly in that function.
Refer this https://github.com/angular-ui/ui-select/wiki/ui-select

ui-select angular need a selectable option with null value

I'm using ui-select angular. I need an option with null value to be selected. Googled it but can't find solutions that fits.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ui-select allow-clear ng-model="hotelsCtrl.companySelectedInsert" theme="bootstrap">
<ui-select-match placeholder="Select or search company in the list...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="company in hotelsCtrl.companies | filter: $select.search">
<span ng-bind-html="company.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
having this

The straight forward way is to add and element with null value in hotelsCtrl.companies before setting it to ui-select.
something like this:
{
name:'none',
value:null
}
maybe if you want just to reset once the one of the options are selected then use backspace
here is a working example, check this out http://jsfiddle.net/Miqe/x6bqubtw

Angularjs two form for the same controller

I have a problem with angularjs code. I have a roles select replicated in two modal: create user and change role.
This select is filled with http call in this way:
<ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="newUser.role" required>
<ui-select-match placeholder="Select role">
{{$select.selected.role}}
</ui-select-match>
<ui-select-choices
repeat="role.idRole as role in (roles | filter: $select.search) track by role.role">
<span data-ng-bind="role.role"></span>
</ui-select-choices>
</ui-select>
and in angular I have:
$http({
method: 'GET',
url: 'roles'
}).then(function successCallback(response) {
$scope.roles = response.data.result;
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
So I put the HTML code inside form in two modal.
In the first, create user, all works fine, in the second I can't use a different data-ng-model because otherwise I receive undifined element. For example I have this:
<form novalidate class="simple-form" name="newRoleForm">
<!-- form start -->
<div class="box-body">
<div class="form-group">
<label>New role</label>
<!-- <ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="newRole.role" required> <ui-select-match
placeholder="Select new role">
{{$select.selected.role}}</ui-select-match> <ui-select-choices
repeat="role.idRole as role in (roles | filter: $select.search) track by role.role">
<span data-ng-bind="role.role"></span> </ui-select-choices> </ui-select> -->
<ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="newUser.role" required> <ui-select-match
placeholder="Select role">
{{$select.selected.role}}</ui-select-match> <ui-select-choices
repeat="role.idRole as role in (roles | filter: $select.search) track by role.role">
<span data-ng-bind="role.role"></span> </ui-select-choices> </ui-select>
</div>
</div>
</form>
If I use commented code I don't receive in my javascript the role value, if I use the uncommented code it works because newUser is used in the other modal.
I could use this actual code, but I would like to understand why it works and the other no.
Furthermore when I open the second modal I see the value setted in the first.
Do you know why?

Its a little tricky to get a perfect overview but I think I'll try to answer few of your questions:
Why doesn't newRole.role work when newUser.role does?
Basically you answered this yourself from what I can tell. You need to define the object somewhere in your scope before starting to bind properties to it. Ie a simple $scope.newRole = {} in your controller might fix this error.
Value from the first modal is set in the second one?
I'm not sure about this as I cant see this second modal (?). But if you reuse the same code in the same scope you will bind data to the same newUser object. Hence getting the same values each time.
I hope this helped in some way

How can preselect value in angular ui select editing

I am using angular schema form anf use ui select to populate options.
Now i am binding my object with id of the choices. Here is the template
<ui-select
ng-model="$select.selected"
theme="bootstrap"
ng-disabled="disabled"
on-select="$$value$$=$select.selected.id"
>
<ui-select-match placeholder="Please Select ">{{$select.selected.display}}</ui-select-match>
<ui-select-choices repeat="a in choices">
<div ng-bind-html="a.display"> {{ a.display }}</div>
</ui-select-choices>
</ui-select>
I wasn't ben able to bind my $$value$$ to id of the selected object.
so for hack i added this
on-select="$$value$$=$select.selected.id"
$$value$$ represents the model.myobject so on select i am manually binding id to that property.
For new object this works fine.
But when i need to edit object then that option is not preselected.
Any ideas how can i do that
There is a addon for ui select for schema form and i got idea from it.
But i could not fully understood it
https://github.com/chengz/schema-form-uiselect/blob/master/src/single.html