我想通過POST從我的提交表單發送數據，我的所有輸入值都被傳輸，除了select，inputSpecie和inputTag都是空的！我想顯示選擇的選項標識其虛也這是我的HTML表單：AngularJS使用選擇選項提交表單

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


     }); 

    });

來源

2016-04-14 Soumia

我認爲，如果你改變它的工作，因爲我猜你沒有在你的控制器定義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>

來源

2016-04-14 09:45:21

我剛纔試了，我仍然得到空值 – Soumia

你可以發佈你的控制器代碼嗎？ –

我已更新我的第一篇文章，非常感謝，控制器包含對象鳥，並將鳥的數據發送到服務器 – Soumia

使用ngOptions纔能有itwork與NG-型號：

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

來源

2016-04-14 09:55:03 Walfrat

它不起作用，仍然得到空數據 – Soumia

對不起，我犯了一個錯字，我重寫了ng選項看看 – Walfrat

它仍然是一樣:) – Soumia

AngularJS使用選擇選項提交表單

回答

更新

相關問題