AngularJS单选按钮控制器中Scope变量对象未初始化问题

我来帮你搞定这个价格不显示的问题，你的代码里有几个关键小问题，咱们一个个捋清楚：

1. mainDish 初始化错误 #

你现在把 mainDish 定义成了一个包含两个独立对象的数组：[{name:''},{price:''}]，但实际上你需要的是单个对象，把 name 和 price 放在同一个对象里，这样才能通过 model.mainDish.name 和 model.mainDish.price 正确访问对应属性。

2. $watch 回调里的作用域问题 #

在 $watch 的回调函数中，你直接使用了 model.mainDish.price，但这里的 model 并没有绑定到 Angular 的 $scope 上，必须写成 $scope.model.mainDish.price，否则会触发「model 未定义」的错误，导致价格无法更新。

3. 页面初始化时无默认菜品 #

页面首次加载时，mainDish.name 是空值，所以价格也不会被设置。我们可以给 mainDish 初始化一个默认菜品和对应价格，让页面一开始就能显示内容。

修复后的完整代码 #

控制器代码（menuController.js） #

var app = angular.module('app', []); 
app.controller('menuController', [ '$scope', function($scope){ 
  // 修正：将mainDish改为单个对象，并初始化默认菜品与价格
  $scope.model = {
    title:'Our Menu', 
    mainDish: {name:'Cheese Pizza', price:15},
    specialInstructions: ''
  }; 

  $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; 
  } 
} ]);

HTML 代码（补充默认选中逻辑） #

给默认菜品的单选框加上 ng-checked，让页面加载时自动选中：

<!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')" ng-checked="model.mainDish.name === '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>

这样修改后，页面加载时就会自动显示默认的芝士披萨和价格，切换单选框时价格也会实时更新啦~

内容的提问来源于stack exchange，提问作者Math_Zombie