绑定 ng-options 和 ng-model 的问题答案

【问题标题】：Issue in binding ng-options and ng-model绑定 ng-options 和 ng-model 的问题
【发布时间】：2015-12-04 00:20:52
【问题描述】：

我有一个网络应用程序，其中前端接收两个字段的用户输入：日期和类别，输入必须作为 JSON 发送到后端。我做不到。

我的代码如下：

index.html

<div ng-controller="HomeController">
<p>Day of publishing the article:</p>
<select name="day" id="day" ng-options="day as day.name for day in days" chosen ng-model="formData.day"></select><br><br>
</div>

<div ng-controller="HomeController">
<p>Category of the article:</p>
<select name="category" id="category" ng-options="category as category.name for category in categories" chosen ng-model="formData.category"> </select><br><br>
</div>

HomeController.js

var myApp = angular.module('myApp.controllers', []);

myApp.controller('HomeController', ['$scope','$http',function ($scope,$http) {

    console.log("Hello");
    $scope.formData={};

    $scope.days = [
     { name: 'Monday' },
     { name: 'Tuesday' },
     { name: 'Wednesday' },
     { name: 'Thursday' },
     { name: 'Friday' },
     { name: 'Saturday' },
     { name: 'Sunday' },
   ];    
    $scope.categories = [
     { name: 'Lifestyle' },
     { name: 'Entertainment' },
     { name: 'Business' },
     { name: 'Social Media' },
     { name: 'Tech' },
     { name: 'World' },
   ];   

    $scope.submit = function() {

        $http.post("http://localhost:8080/api/users/", $scope.formData).
        success(
            function(response) {
                console.log(response);
            })
        .error(function(){
            console.log("Error");
        });
    }
}]);

【问题讨论】：

“我不能这样做”是什么意思？您的提交功能是否会引发某种错误？您在服务器上获得的数据是否与您预期的不同？更多细节会有所帮助。
@Claies：除了我在 index.html 中提到的这两个字段之外，我在前端有许多来自用户的输入，这些输入被解析为 JSON 并成功发布到后端，我在哪里使用 ng-options 下拉菜单。我正在编辑的问题中添加相同的屏幕截图。
这仍然不能澄清你的问题。您需要提供您的预期和实际结果，而不仅仅是“它没有成功”。
{"titleName":"Title","article":"Hello","avgshareArticleShare":3} 所以在这个 JSON 中，我的 html 代码中的天数和类别这两个字段没有被解析.没有错误。
为什么这些下拉菜单都包含在它们自己的ng-controller 实例中？ <div> 中的每一个都有不同的作用域，这不会像你期望的那样工作。

标签： html angularjs angular-ngmodel ng-options

【解决方案1】：

选择下拉菜单包含在 HomeController 的不同实例中。因此，两个下拉列表中的 formData 模型属于不同的范围。我已将两个下拉列表包装在 HomeController 的单个实例中。

<div ng-controller="HomeController">
   <p>Day of publishing the article:</p>
   <select name="day" id="day" ng-options="day as day.name for day in days" chosen ng-model="formData.day"></select><br><br>

   <p>Category of the article:</p>
   <select name="category" id="category" ng-options="category as category.name for category in categories" chosen ng-model="formData.category"> </select><br><br>
</div>

这是一个有效的fiddle。

【讨论】：