1
我有一個選擇元素，我嘗試檢索使用ng模型選擇的值。它在我的應用程序頁面上正確顯示，但在應用程序控制器中它仍處於初始值。我一直在尋找答案，但我沒有找到任何令人滿意的東西。在選擇標記ng模型的問題
我的選擇：
<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};
編輯
這裏是我的角度應用程序（我在哪裏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>
它是正確的嗎？ http://jsfiddle.net/crndngdc/ – Errorpro
它似乎工作代碼和正確的代碼 –
它的工作原理，但是當我做consol.log（選擇）它總是打印0即使當我選擇另一個選項 – Manouk