I am trying to do a simple drop down menu with a search in it. I cant get the ng-model to be changed on this drop down. this is what I have done, and as you can see its very simple (mostly copy paste from the get started)
I couldnt find any info about the $select. Is the problem is because I didnt add this to the ng-model? if so, what should I add to the controller
<div class="form-group">
<label class="col-md-1">Investigation type<font color="red"><b>*</b></font></label>
<div class="col-md-3">
<ui-select ng-model="investigationType" ng-change="someFunc()" theme="bootstrap">
<ui-select-match placeholder="Select or search a contries in the list...">
<span>{{$select.selected.name}}</span>
</ui-select-match>
<ui-select-choices repeat="item in contries | filter: $select.search">
<div ng-bind-html="item.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
</div>
{{investigationType}}
as you can see, very simple thing, though after selected I dont see anything on the page. whats wrong?
app.controller('investigationCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.investigationType ="";
$scope.toolShow=false;
$scope.someFunc = function () {
$scope.investigationType == "Alabama")
$scope.toolShow = true;
else
$scope.toolShow = false;
}
$scope.contries = [
{ id: 1, name: "Alabama" },
{ id: 2, name: "Alaska" },
{ id: 3, name: "Arizona" },
{ id: 4, name: "Arkansas" }];
}]);
You need ng-model
to hold the selected object, not a string.
Rewrite to ng-model="contries.selected"
(while contries
is you data array).
Then add {{contries.selected}}
to your template, you will see a serialization of your selected object, so just use contries.selected.name
to access your item name.
You can also do something like
ng-change="someFunc($select.selected)"
To access your selected object from the callaback, then you can avoid messing with the ng-model
.