gurps gurps - 2 months ago 5
AngularJS Question

passing ng-model variable through an ng-click to a function

I am trying to use a select and options tag with HTML. The data is being brought through using

ng-repeat
, when the user chooses an item from the list and presses the get button, I want to pass what the user has chosen from the options list into a function using
ng-click


HTML

<ul>
<li class="col-xs-4"><a href="#favourites">Favourites</a></li>
</ul>
<div ng-controller="favouritesController">
<select class="col-xs-12" name="weather">
<option ng-repeat="weatherList in weatherLists" ng-model="city">{{weatherList.place}}</option>
</select>
<div class="col-xs-12">
<button type="button" name="button" class="deleFav" ng-click="getFavWeather(city)">Get</button>
</div>
</div>


Javascript Code

var myApp = angular.module('myApp', ['ngRoute'])

myApp.controller('favouritesController', function($scope, $http, $rootScope, $route, $location) {
$scope.getFavWeather = function(weatherList){
console.log("yes yes yes")
console.log($scope.city)
}
})

Answer

Add ng-model on select and use it in your ng-click :

<div ng-controller="favouritesController">
 <select class="col-xs-12" name="weather" ng-model="citySelected">
  <option ng-repeat="weatherList in weatherLists" ng-model="city">{{weatherList.place}}</option>
 </select>
 <div class="col-xs-12">
  <button type="button" name="button" class="deleFav" ng-click="getFavWeather(citySelected)">Get</button>
 </div>
</div>
Comments