javascript - Angular $http POST 无法绑定(bind)数组

Question

所以我尝试使用 Angular 设置 post 函数。我有一个 HTML 表单，其中有两个文本框(用于用户输入)和一个用于选择多个选项的下拉菜单(以便用户填写表单并向服务器提交数据)。

绑定(bind)两个文本框很好，但我不知道如何将数组中的两个选项绑定(bind)为下拉菜单中的选项？

(这是一个 fiddle :http://jsfiddle.net/gtv7s8h3/2/)

表格:

<form>
<input type="text" id="name" ng-model="myForm.Title" ng-minlength="5" ng-maxlength="20"> title <br/>
<input type="text" id="name" ng-model="myForm.Content" ng-minlength="5" ng-maxlength="20"> content <br />

<select ng-model="CategoryId" ng-options="item.name for item in CategoryId"></select>

<button ng-click="myForm.submitTheForm()">Submit Form</button>
</form>

Angular 发布:

 angular.module("myapp", [])
 .controller("MyController", function($scope, $http) {
  $scope.myForm = {};
  $scope.myForm.Title = "";
  $scope.myForm.Content = "";
  $scope.CategoryId = {
    data: [{
        id: '316556404cac4a6bb47dd4c7ca2dac4a',
        name: 'name1'
    }, {
        id: '306e3d9a6265480d94d0d50e144435f9',
        name: 'name2'
    }]
  };       

 $scope.myForm.submitTheForm = function(item, event) {
 var dataObject = {
 Title : $scope.myForm.Title,
 Content : $scope.myForm.Content,
 CategoryId : $scope.CategoryId 

   };

   var responsePromise = $http.post("/url", dataObject, {});
   responsePromise.success(function(dataFromServer, status, headers, config) {
      console.log(dataFromServer.title);
   });
    responsePromise.error(function(data, status, headers, config) {
      alert("Submitting form failed!");
   });
 }
  });

Answer 1

您正在尝试将 categoryID 绑定(bind)到您的数组，而您的 ngOptions 表达式不会循环遍历您的数组。您需要将 categoryId 值绑定(bind)到不同的模型。

为您的categoryID添加模型:

$scope.myForm.categoryId = null;

并更改您的选择标记:

<select ng-model="myForm.categoryId" ng-options="item.id as item.name for item in CategoryId.data"></select>