更新

Question

我想通过POST从我的提交表单发送数据，我的所有输入值都被传输，除了select，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;


         });

    });

Answer 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>

Answer 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>

AngularJS使用选择选项提交表单

2 个答案:

更新