Angularjs 范围变量对象未在单选按钮控制器中初始化

请阅读控制器代码。我无法打印每个披萨的价格。我已经发现，即使在我初始化了mainDish对象的价格和名称之后，当代码第一次运行时，它也不会显示在网页上。/* 我正在写这些额外的单词，因为stackoverflow不允许我发布这个，因为它认为代码需要更多细节......*/

<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Tony's Pizza</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
</head>
<body ng-controller="menuController">
<div class="container">
<h1>Tony's Pizza</h1>
<h2>{{model.title}}</h2>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Cheese Pizza')"/> Cheese Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Pepperoni Pizza')"/> Pepperoni Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Margherita  Pizza')"/> Margherita Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('BBQ Chicken Pizza')"/> BBQ Chicken Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Combo Pizza')"/> Combo Pizza</label>
</div>
<div>
<h3>Selected Item</h3>
<pre>{{model.mainDish.name}}</pre>
</div>
<div>
<h3>Special Instuctions</h3>
<textarea class="form-control" ng-model="model.specialInstructions"></textarea>
</div>
<div>
<h3>Order Summary</h3>
<pre> {{ model.mainDish.name }} {{ model.mainDish.price }} - {{ model.specialInstructions }} </pre></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="./app/app.js"></script>
<script src="./app/menuController.js"></script>
</body>
</html>

脚本>

var app = angular.module('app', []);
app.controller('menuController', [
'$scope',
function($scope){
$scope.model={title:'Our Menu',
mainDish:[{name:''},{price:''}]};
$scope.$watch('model.mainDish.name',function(newValue,oldValue){
if(newValue==='BBQ Chicken Pizza'){
alert('You have selected BBQ Chicken Pizza');
model.mainDish.price= 10;
}
if(newValue==='Cheese Pizza'){
model.mainDish.price= 15;
}
if(newValue==='Pepperoni Pizza'){
model.mainDish.price= 20;
}
if(newValue==='Margherita Pizza'){
model.mainDish.price= 30;
}
if(newValue==='Combo Pizza'){
model.mainDish.price= 40;
}
});
$scope.changeMainDish = function (item) {
$scope.model.mainDish.name = item;
}
}
]);</script>

您正在更新模型，而不是$scope.$watch model。

<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Tony's Pizza</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-controller="menuController">
<div class="container">
<h1>Tony's Pizza</h1>
<h2>{{model.title}}</h2>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Cheese Pizza')"/> Cheese Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Pepperoni Pizza')"/> Pepperoni Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Margherita  Pizza')"/> Margherita Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('BBQ Chicken Pizza')"/> BBQ Chicken Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Combo Pizza')"/> Combo Pizza</label>
</div>
<div>
<h3>Selected Item</h3>
<pre>{{model.mainDish.name}}</pre>
</div>
<div>
<h3>Special Instuctions</h3>
<textarea class="form-control" ng-model="model.specialInstructions"></textarea>
</div>
<div>
<h3>Order Summary</h3>
<pre> {{ model.mainDish.name }} {{ model.mainDish.price }} - {{ model.specialInstructions }} </pre>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="./app/app.js"></script>
<script src="./app/menuController.js"></script>
</body>
</html>
<script>
var app = angular.module('app', []);
app.controller('menuController', [
'$scope',
function($scope) {
$scope.model = {
title: 'Our Menu',
mainDish: {
name: 'test', 
price: 'test'
}
};
$scope.$watch('model.mainDish.name', function(newValue, oldValue) {
if (newValue === 'BBQ Chicken Pizza') {
alert('You have selected BBQ Chicken Pizza');
$scope.model.mainDish.price = 10;
}
if (newValue === 'Cheese Pizza') {
$scope.model.mainDish.price = 15;
}
if (newValue === 'Pepperoni Pizza') {
$scope.model.mainDish.price = 20;
}
if (newValue === 'Margherita Pizza') {
$scope.model.mainDish.price = 30;
}
if (newValue === 'Combo Pizza') {
$scope.model.mainDish.price = 40;
}
});
$scope.changeMainDish = function(item) {
$scope.model.mainDish.name = item;
}
}
]);
</script>

出现问题是因为您声明 mainDish 的方式。在你的代码中，mainDish是一个数组，但你访问它就像它是一个对象一样。不能将$watch用于嵌套对象。最好的解决方案是遵循对此问题给出的答案，并使用ng-change和ng-model.

相关内容

最新更新

热门标签：