Angularjs Scope变量对象未在单选按钮控制器中初始化答案

【问题标题】：Angularjs Scope variable object not initialising in radio button controllerAngularjs Scope变量对象未在单选按钮控制器中初始化
【发布时间】：2018-05-23 19:44:12
【问题描述】：

请阅读控制器代码。我无法打印每个披萨的价格。我发现即使在我初始化 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>

【问题讨论】：

那不是你在 AngularJS 中做单选按钮的方式。单选按钮需要ng-model 指令。有关详细信息，请参阅AngularJS <input type="radio" Directive API Reference。
这种方法违反了DRY programming principle，因为主菜选择需要在 HTML 模板和 JS 控制器中输入。这使得添加新菜肴变得乏味且容易出错。

标签： javascript html angularjs angular-ngmodel

【解决方案1】：

您正在更新模型而不是 $watch 中的 $scope.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 ，但在我更正手表代码之前它仍然没有显示初始值
您指的是哪些价值观？我在所选项目和订单摘要下看到了测试值。

【解决方案2】：

出现问题是因为您声明 mainDish 的方式。在您的代码中，mainDish 是一个数组，但您可以像访问它一样访问它是一个对象。您不能将 $watch 用于您想要的嵌套对象。最好的办法是关注the answer given on this question，使用ng-change和ng-model。

【讨论】：

它不起作用，而且正如我所说，如果我写成： mainDish:{name:'test',price:'test'};它应该初始化状态并在页面上显示初始值
根据这个问答stackoverflow.com/questions/24876944/…，您不能在模型内的mainDish等嵌套对象上使用$watch。它建议您使用 ng-change 和 ng-model
更新答案。