Search code examples
angularjsangularjs-ng-repeatangularjs-ng-click

Can't update an input with angular click

I have this html:

<input type="range" value="{{kelvins}}" ng-model="temperatura" ng-change="atualizaTemperatura(temperatura)" min="3000" max="8000" step="100" name="temperatura">
<ion-list ng-repeat="temp in listTemperatura | orderBy:nome">
  <ion-item class="item-dark" style="margin-bottom: 2px">
    <span ng-click="selectTemperatura(temp)">{{temp.nome}}</span>
    <span class="pull-right" ng-click="excluiItem(temp)" style="font-size:larger"><i class="fa fa-times-circle"></i></span>
  </ion-item>
</ion-list>

and this is in the controller

$scope.selectTemperatura = function(temp){
  $scope.kelvins = temp.temp;
  $scope.temperatura = temp.temp;
};

What I'm doing wrong? I can't update the input and the label upon clicking on the item

Solution

  • Track the selected temp and use its values with ng-model. Model will update the value you dont need to change it. There is your example...

    var app = angular.module("app",[]);
app.controller("ctrl", function($scope){

$scope.listTemperatura = [{temp:10, nome:"Click ME 1"}, {temp:80, nome:"Click ME 2"}]

$scope.selectTemperatura = function(temp){
  $scope.selectedTemp = angular.copy(temp);
};


})
    <html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body ng-app="app" ng-controller="ctrl" >
  


  
  <input type="range" ng-model="selectedTemp.temp" ng-change="atualizaTemperatura(temperatura)">
  {{selectedTemp.nome}}
  <ul>
    <li ng-repeat="temp in listTemperatura | orderBy:nome">
      <div class="item-dark" style="margin-bottom: 2px">
        <span ng-click="selectTemperatura(temp)">{{temp.nome}}</span>
        <span class="pull-right" ng-click="excluiItem(temp)" style="font-size:larger"><i class="fa fa-times-circle"></i></span>
      </div>
    </li>
  </ul>
  
  
  
  
  </body>
</html>