CODEWITHSUNDEEP
angularjsionic-framework
Sumit
Sumit

Reputation: 35

Value of input tag not updating from a list in AngularJS+Ionic

I am trying to set the value of input equal to the item in ion-list based on a click event. The value updates on first click event but is not updating on later clicks

<ion-view view-title="Add Cities">
  <ion-content>
           <label class="item-input-wrapper bar-subheader">
          <i class="icon ion-android-search placeholder-icon"></i>
            <input style="width:100%" type="text" placeholder="Search" ng-model="CityName">
          </label>

          <ion-button class="button ion-plus button-positive" ng-click="addCity(CityName)" >Add</ion-button>
          <div class="list">
            <ion-list>
                <ion-item ng-repeat="item in states|filter:CityName" ng-click="set(item)">
                    {{item}}
                </ion-item>
            </ion-list>

          </ul>
          </div>


  </ion-content>
</ion-view>

associated function in controller.js

$scope.set=function(title){
       $scope.CityName=title;

       console.log(title);

   }

i have checked console the function triggers but the input updates only once i have tried adding $scope.$apply() in function set but it's still not working.
Please suggest edits in the above code or is there a better method to do the same?

Upvotes: 1

Views: 206

Answers (1)

Sumit
Sumit

Reputation: 35

The answer is explained here by @Pankaj Parkar
My problem was fixed by renaming ng-model="CityName" to ng-model="data.CityName"

<input style="width:100%" type="text" placeholder="Search" ng-model="data.CityName">

and changing this

$scope.set=function(title){
       $scope.CityName=title;
       console.log(title);
   }

to

$scope.set=function(title){
       $scope.data={'CityName':title};
       console.log(title);
   }

Upvotes: 1

Related Questions