1

I have a controller in AngularJS and a view which goal is to create an auto-complete dropdown. I have some issues with the functionality. I start typing and the options show under the input but I want to click on one of them and the input's value to change and the suggestions' list to disappear. This is not happening at the moment.

This is my controller:

$http.get(API_URL + "get/cities")
    .then(function (response) {
            $scope.cities = response.data;
        },
        function () {
            console.log('error');
        });

$scope.selectCity = function (cityId, name) {
    $scope.citySearch = name;
    $scope.showCityList = false;
};

And here is the view:

<div class="row">
    <div class="col-xs-12">
        <div class="form-group">
            <input type="text" ng-model="citySearch" ng-change="showCityList = true" class="form-control input-lg" placeholder="Град">
            <ul ng-if="citySearch.length > 0 && showCityList" class="list-group">
                <li ng-repeat="city in cities | filter: citySearch | orderBy:'name'" class="list-group-item" ng-click="selectCity(city.id, city.name)">@{{ city.name }}</li>
            </ul>
        </div>
    </div>
</div>

I should mention that this HTML code is placed inside of a ng-switch-when.

dinkogosp
  • 11
  • 3
  • it seems to do what you want! could you please explain the problem even more? – Naren Murali Aug 13 '18 at 08:06
  • if I click on one of the options the value of the input doesn't change and the
      doesn't disappear
     – dinkogosp Aug 13 '18 at 08:10
  • It seems to do that, can you check this [`JSFiddle`](https://jsfiddle.net/Kai_Draord/3zm06dxh/) – Naren Murali Aug 13 '18 at 08:11
  • I forgot to mention that this html is inside of an switch case, i will edit the question right away – dinkogosp Aug 13 '18 at 08:13
  • Could you please replicate the issue in the JSFiddle I provided, so that I can work with the issue directly? – Naren Murali Aug 13 '18 at 08:15
  • I think I updated it – dinkogosp Aug 13 '18 at 08:18
  • You need to click on fork after loggin in and share the link of it here – Naren Murali Aug 13 '18 at 08:19
  • https://jsfiddle.net/gospodinove/8b1ru26e/ there it is – dinkogosp Aug 13 '18 at 08:21
  • New AngularJS developers often do not realize that `ng-repeat`, `ng-switch`, `ng-view`, `ng-include` and `ng-if` all create new child scopes, so the problem often shows up when these directives are involved. This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models. – georgeawg Aug 13 '18 at 08:21
  • what does that mean? and I am definitely new to AngularJS haha – dinkogosp Aug 13 '18 at 08:23
  • @dinkogosp Simply up, `ng-switch` and `ng-if` will create a new scope, so the updates from elements inside the `ng-if` or `ng-switch` will not propagate to the main parent controller. Thus you are getting the issue, to solve this you can use `$parent` to update the variable at the main controller instead, anyway here is the [working example](https://jsfiddle.net/Kai_Draord/qtbvLcxo/) Read more about this issue [here](http://www.lorenzomarcon.com/2014/07/ng-ifng-switch-breaks-ng-model-no-its-just-a-matter-of-understanding-scopes/) – Naren Murali Aug 13 '18 at 08:57

0 Answers0