无法通过 angular 单击更新输入

Question

我有这个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>

这是在控制器中

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

我做错了什么？单击项目时无法更新输入和标签

Answer 1

你期待发生什么？它是跨度中的 {{temp.nome}} 吗？如果是这样，您从哪里访问 'nome' 属性？在这两种情况下，您的方法只查看 temp.temp。

编辑：在 type="range" 输入中，您需要设置上限和下限。例如 $scope.min 和 $scope.max;您的方法可以很容易地更改为：

// Declare these as global $scope variables:
$scope.min = 1;
$scope.max = 999;

$scope.selectTemperatura = function(type = 'min', temp) {
  $scope[type] = temp;
};

您的 html 因点击而略有变化：

<span ng-click="selectTemperatura('min', temp)">{{temp.nome}}</span>

这会设置最小值，但您也可以轻松地将 selectTemperature('max', temp) 设置为最大值。

对于 min/max 值，您的原始范围滑块也需要稍作改动：

<input type="range" value="{{kelvins}}" ng-model="temperatura"
  max="{{max}}" min="{{min}}" ng-change="atualizaTemperatura(temperatura)" />

Answer 2

代码对我来说似乎不错，只要确保你点击了那个元素（父元素可能在子元素之上）。

Answer 3

跟踪选定的温度并将其值与 ng-model 一起使用。模型将更新您不需要更改的值。有你的例子...

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>

无法通过 angular 单击更新输入

Can't update an input with angular click

angularjs

angularjs-ng-repeat

angularjs-ng-click