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

跟踪选定的温度并将其值与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>

Answer 2

你期待发生什么？它是跨度中的{{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）设置为设置最大值。

您的原始范围滑块也需要对最小/最大值进行微小更改：

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

Answer 3

代码对我来说似乎不错，只需确保您点击该元素（父元素可能位于子元素之上）。

无法通过角度点击更新输入

3 个答案: