我有一个选择元素，我尝试使用 ng-model 检索选择的值。它正确显示在我的应用程序页面上，但在应用程序 Controller 中它仍然是初始值。我一直在网上寻找答案，但没有找到满意的答案。
我的选择:
<select ng-model= "choice.selected" ng-init = "choice.selected = historicOptions[0].id" ng-options = "historicOption.id as historicOption.value for historicOption in historicOptions">
</select>
<br> choice : {{choice.selected}}
用于获取所选值的选项和变量(初始化为默认值):
$scope.historicOptions = [
{id: 0, value: "month"},
{id: 1, value: "week"},
{id: 2, value: "day"}
];
$scope.choice ={selected: 0};
编辑
这是我的 Angular 应用程序(我在其中执行 console.log())
var app = angular.module('AppEfergy', []);
app.factory('historicFactory',[function(){
var h = {
historic: []
};
h.createHistoric = function(choix){
console.log("choix = ", choix);
if(choix == 0){
return h.historic = [
{date:"October" ,consumption:230},
{date:"September" ,consumption:235},
{date:"August" ,consumption:235},
{date:"July" ,consumption:240}
];
}
else if(choix == 1){
return h.historic = [
{date:"28/09/2015 - 04/10/2015" ,consumption:52},
{date:"05/10/2015 - 11/10/2015" ,consumption:55},
{date:"12/10/2015 - 18/10/2015" ,consumption:48},
{date:"19/10/2015 - 25/10/2015" ,consumption:50},
{date:"26/10/2015 - 01/11/2015" ,consumption:49}
];
}
else if(choix == 2){
return h.historic = [
{date:"01/11/2015" ,consumption:10},
{date:"31/10/2015" ,consumption:11},
{date:"30/10/2015" ,consumption:9 },
{date:"29/10/2015" ,consumption:8 },
{date:"28/10/2015" ,consumption:8 },
{date:"27/10/2015" ,consumption:10},
{date:"26/10/2015" ,consumption:9 }
];
}
};
return h;
}]);
app.controller('MainCtrl', ['$scope','historicFactory', function($scope, historicFactory){
$scope.choice ={selected: 0};
$scope.choiceBis ={selected: 0};
$scope.historicOptions = [
{id: 0, value: "month"},
{id: 1, value: "week"},
{id: 2, value: "day"}
];
$scope.saveOptions = [
{id: 0, value: -10},
{id: 1, value: -5 },
{id: 2, value: 5 },
{id: 3, value: 10 }
];
$scope.currentValue = 237;
$scope.cost = 21;
$scope.saving = 3;
$scope.historic = historicFactory.createHistoric($scope.choice.selected);
console.log("choice : ", $scope.choice.selected);
}]);
和我的 html 页面
<!DOCTYPE html>
<html>
<head>
<title>Efergy App</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href ="EfergyStyle.css">
<!-- include Angular library-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<!-- include the AngularApp-->
<script src="AppEfergy.js"></script>
</head>
<body ng-app = "AppEfergy", ng-controller = "MainCtrl">
<header>
Power Consumption
</header>
<div class = "currentConsumption">
<br><h2>Current Consumption</h2>
<span class = "Value" ng-bind = "currentValue"></span>
<span class="unit">kW</span>
</div>
<br>
<div class = "historic">
<h3>Historic</h3>
Display an historic by
<select ng-model= "choice.selected" ng-options = "historicOption.id as historicOption.value for historicOption in historicOptions">
</select>
<br> choice : {{choice.selected}}
<br>
<table class = "historic">
<tr>
<th>Date</th>
<th>Average consumption (kW)</th>
</tr>
<tr ng-repeat = "historics in historic">
<td>
{{historics.date}}
</td>
<td>
{{historics.consumption}}
</td>
</tr>
</table>
</div>
</body>
</html>
最佳答案
在 Controller 上添加以下代码
$scope.getSelectedValue = function() {
console.log("choice : ", $scope.choice.selected);
$scope.historic = historicFactory.createHistoric($scope.choice.selected);
};
将此事件添加到您的选择中，如下所示
ng-change="getSelectedValue()"
在您的代码中，您没有在更改选择时调用方法。这就是为什么第一次 Controller 初始化时控制台 pint 为 0 的原因。
关于javascript - select 标签中 ng-model 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33518897/