【问题标题】：AngularJS Submit form with Select OptionsAngularJS 使用选择选项提交表单
【发布时间】：2016-08-05 18:25:07
【问题描述】：

我想通过 POST 从我的提交表单发送数据，除了选择的输入值之外，我所有的输入值都被传输，inputSpecie 和 inputTag 为空！我正在尝试显示选择的选项ID，它也是空的这是我的 HTML 表单：

<div class="container start">
<div class="panel panel-default">
 <!-- Default panel contents -->
  <div class="panel-body"><h1>Feeding Station Administration</h1>
  <!-- form -->
   <form class="form-signin" ng-submit="submit()" ng-controller="adminController">
    <h2 class="form-signin-heading">Add new Bird</h2>
    <select name= "inputTag" id= "inputTag" class="form-control" placeholder="Tag Type" ng-model="bird.inputTag">
      <option ng-repeat="tag in tags" value="{{option.id}}" >{{tag.tagName}}</option>
    </select><tt>option = {{bird.inputTag}}</tt><br/>
    <button class="btn btn-primary" ng-click="addTag()">Add Tag</button>
    <br/><br/>
     <select name = "inputSpecie" id= "inputSpecie" class="form-control" placeholder="Specie Category" ng-model="bird.inputSpecie">
      <option ng-repeat="specie in species" value="{{option.id}}"  >{{specie.latinName}}</option>
    </select> <tt>option = {{bird.inputSpecie}}</tt><br/>
    <br/> 
     <button class="btn btn-primary" ng-click="addSpecie()">Add Specie</button>
        <br/><br/>
    <input type="text" id="inputSex" class="form-control" placeholder="Sex"  ng-model="bird.sex"/>
        <br/><br/>
    <input type="text" id="inputRFID" class="form-control" placeholder="RFID Value" ng-model="bird.rfid"/>
        <br/><br/> 
    <textarea id="inputComment" class="form-control" placeholder="Comment" ng-model="bird.comment"></textarea>
        <br/><br/> 
    <input type="file" ng-model="form.file_avatar" id="file_avatar"  />
        <br/><br/>  

    <input class="btn btn-lg btn-primary btn-block" type="submit" id="submit" value="Submit" />
  </form>

  </div> 
</div>
</div>

控制器脚本：

angular.module('test').controller('adminController', function($scope, $http)
 {

        $scope.bird;
        $scope.submit = function() 
        {
            console.log(" Get fields values and Insert in the DB !" );

            // posting Data to server
            $http.post('/api/adminPanel/create', $scope.bird).then(function (response) {
            console.log(response);
             });
            // failure post

        } ;

        $http.get('/api/adminPanel').then(function (response) {
            // create a blank object to handle form data.
            //$scope.bird = {};
            $scope.species = response.data.species;
            $scope.tags = response.data.tags;


         });

    });

【问题讨论】：

标签： html angularjs forms post

【解决方案1】：

我认为如果你改变它会起作用，因为我猜你没有在你的控制器中定义option

<select name= "inputTag" id= "inputTag" class="form-control" placeholder="Tag Type" ng-model="bird.inputTag">
  <option ng-repeat="tag in tags" value="{{option.id}}" >{{tag.tagName}}</option>
</select><tt>option = {{bird.inputTag}}</tt><br/>

到

<select name= "inputTag" id= "inputTag" class="form-control" placeholder="Tag Type" ng-model="bird.inputTag">
  <option ng-repeat="tag in tags" value="{{tag.id}}" >{{tag.tagName}}</option>
</select><tt>option = {{bird.inputTag}}</tt><br/>

更新

angular.module('test', []).controller('adminController', function($scope, $http, $timeout) {

  $scope.bird;
  $scope.submit = function() {
    console.log(" Get fields values and Insert in the DB !");

    // posting Data to server
    $http.post('/api/adminPanel/create', $scope.bird).then(function(response) {
      console.log(response);
    });
    // failure post

  };

  $timeout(function() {
    $scope.$apply(function() {
      $scope.tags = [{
        "id": 1,
        "tagName": "abc"
      }, {
        "id": 2,
        "tagName": "xxx"
      }];
      $scope.species = [{
        'id': 1,
        'specieName': "ddd"
      }, {
        'id': 2,
        'specieName': "dedd"
      }];
    });
  }, 10);

  // create a blank object to handle form data.
  //$scope.bird = {};


});

<body ng-app="test">
  <div class="container start">
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-body">
        <h1>Feeding Station Administration</h1>
        <!-- form -->
        <form class="form-signin" ng-submit="submit()" ng-controller="adminController">
          <h2 class="form-signin-heading">Add new Bird</h2>
          <select name="inputTag" id="inputTag" class="form-control" placeholder="Tag Type" ng-model="bird.inputTag">
            <option ng-repeat="tag in tags" value="{{tag.id}}">{{tag.tagName}}</option>
          </select><tt>option = {{bird.inputTag}}</tt>
          <br/>
          <button class="btn btn-primary" ng-click="addTag()">Add Tag</button>
          <br/>
          <br/>
          <select name="inputSpecie" id="inputSpecie" class="form-control" placeholder="Specie Category" ng-model="bird.inputSpecie">
            <option ng-repeat="specie in species" value="{{specie.id}}">{{specie.specieName}}</option>
          </select> <tt>option = {{bird.inputSpecie}}</tt>
          <br/>
          <br/>
          <button class="btn btn-primary" ng-click="addSpecie()">Add Specie</button>
          <br/>
          <br/>
          <input type="text" id="inputSex" class="form-control" placeholder="Sex" ng-model="bird.sex" />
          <br/>
          <br/>
          <input type="text" id="inputRFID" class="form-control" placeholder="RFID Value" ng-model="bird.rfid" />
          <br/>
          <br/>
          <textarea id="inputComment" class="form-control" placeholder="Comment" ng-model="bird.comment"></textarea>
          <br/>
          <br/>
          <input type="file" ng-model="form.file_avatar" id="file_avatar" />
          <br/>
          <br/>

          <input class="btn btn-lg btn-primary btn-block" type="submit" id="submit" value="Submit" />
        </form>

      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>

【讨论】：

我已经更新了我的第一篇文章，非常感谢，控制器包含对象鸟并将鸟的数据发送到服务器
标签结构是什么？有身份证吗？您可以在发布之前控制台日志$scope.bird 并检查bird.inputTag 是否为空
我正在打印 $scope.bird ，我得到了表单的所有值，除了：inputTag 和 inputSpecie 是空的
我认为您需要检查tags 是否为空或tags 中的标签没有id 或tagName 属性，我将尽快发布一个工作示例跨度>
嗨，@Soumia 是否有效，您还有其他问题吗？如果不是，请接受我的解决方案:) 谢谢

【解决方案2】：

使用 ngOptions 使其与 ng-model 一起工作：

<select name = "inputSpecie" id= "inputSpecie" class="form-control" placeholder="Specie Category" ng-model="bird.inputSpecie"  ng-repeat="specie.id as specie.latinName for specie in species">
</select>

【讨论】：

抱歉我打错了，我重写了 ng-options 看看
还是一样的:)
哼哼，以防万一，你能在 $http.get('/api/adminPanel' 中添加一个 console.log 并检查你的数据是否正常吗？还将 $scope.species 初始化为 []与控制器开头的标签相同