Javascript Angularjs作用域变量对象未在单选按钮控制器中初始化_Javascript_Html_Angularjs_Angular Ngmodel

Javascript Angularjs作用域变量对象未在单选按钮控制器中初始化

javascript html angularjs

Javascript Angularjs作用域变量对象未在单选按钮控制器中初始化,javascript,html,angularjs,angular-ngmodel,Javascript,Html,Angularjs,Angular Ngmodel,请阅读控制器代码。我无法打印每个比萨饼的价格。我发现，即使我初始化了mainDish对象的价格和名称，当代码第一次运行时，它也不会显示在网页上。 /* 我写这些额外的字是因为stackoverflow不允许我发布，因为它认为代码需要更多细节*/ <!DOCTYPE html> <html ng-app="app"> <head> <title>Tony's Pizza</title> <link r

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


托尼比萨饼
托尼比萨饼
{{model.title}}
奶酪比萨饼
意大利香肠披萨
玛格丽特披萨
烤鸡披萨
组合比萨饼
选定项目
{{model.mainDish.name}
特别指示
订单摘要
{{model.mainDish.name}{{model.mainDish.price}}-{{model.specialInstructions}

脚本>

var-app=angular.module（'app'，[]）；
app.controller（'menuController'[
“$scope”，
职能（$范围）{
$scope.model={title:'Our Menu'，
主菜：[{name:'}，{price:'}]}；
$scope.$watch（'model.mainDish.name'，函数（newValue，oldValue）{
如果（newValue==='BBQ鸡肉披萨'）{
警报（“您已选择烧烤鸡肉披萨”）；
型号.主菜.价格=10；
}
如果（newValue==='Cheese Pizza'）{
型号.主菜.价格=15；
}
如果（newValue==='Pepperoni Pizza'）{
型号.主菜.价格=20；
}
如果（newValue==='Margarita Pizza'）{
型号.主菜.价格=30；
}
如果（newValue==='Combo Pizza'）{
型号.主菜.价格=40；
}
});
$scope.changeMainDish=功能（项目）{
$scope.model.mainDish.name=项目；
}
}
]);

出现问题的原因是您声明mainDish的方式。在您的代码中，mainDish是一个数组，但您可以像访问对象一样访问它。不能按您希望的方式将$watch用于嵌套对象。最好的解决方案是遵循，并使用

ng change

和

ng model

更新模型，而不是$watch中的$scope.model


托尼比萨饼
托尼比萨饼
{{model.title}}
奶酪比萨饼
意大利香肠披萨
玛格丽特披萨
烤鸡披萨
组合比萨饼
选定项目
{{model.mainDish.name}
特别指示
订单摘要
{{model.mainDish.name}{{model.mainDish.price}}-{{model.specialInstructions}
var-app=angular.module（'app'，[]）；
app.controller（'menuController'[
“$scope”，
职能（$范围）{
$scope.model={
标题：“我们的菜单”，
主菜：{
名称：'测试'，
价格：'测试'
}
};
$scope.$watch（'model.mainDish.name'，函数（newValue，oldValue）{
如果（newValue===‘烧烤鸡肉比萨饼’）{
警报（“您已选择烧烤鸡肉披萨”）；
$scope.model.mainDish.price=10；
}
如果（newValue===‘奶酪比萨饼’）{
$scope.model.mainDish.price=15；
}
如果（newValue==‘意大利香肠比萨饼’）{
$scope.model.mainDish.price=20；
}
如果（newValue===‘玛格丽塔比萨饼’）{
$scope.model.mainDish.price=30；
}
如果（newValue==='combopizza'）{
$scope.model.mainDish.price=40；
}
});
$scope.changeMainDish=功能（项目）{
$scope.model.mainDish.name=项目；
}
}
]);

它不起作用，而且正如我所说，如果我写为：mainDish:{name:'test'，price:'test}；它应该初始化状态并在页面上显示初始值根据此问题和答案，您不能在嵌套对象（如模型内的mainDish）上使用$watch。它建议您使用ng change和ng modelUpdated答案。谢谢……但如果我初始化它，它至少应该显示初始价格和名称。问题是您将mainDish作为一个对象数组，而不仅仅是一个对象。我已经修改了我的答案来说明这一点。但是我修正了主盘，在我修正手表代码之前它仍然没有显示初始值。你指的是哪些值？我看到所选项目和订单摘要下的测试值；这不是AngularJS中的单选按钮。单选按钮需要

ng model

指令。有关更多信息，请参阅。此方法违反了，因为主菜选择需要在HTML模板和JS控制器中输入。这使得添加新菜式变得乏味且容易出错。

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>