AngularJS Seçim Seçenekleri ile formu gönderin

Question

Gönderim formumdan POST ile veri göndermek istiyorum, tüm giriş değerlerim seçili olanlar dışında iletiliyor, inputSpecie ve inputTag boş! Ben de onun boş seçme seçeneği kimliği görüntülemek için çalışıyorum Bu benim HTML formu:

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

Kontrolör komut dosyası:

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

Ben bunu değiştirirseniz, işe çünkü ben ne düşünüyorum Eğer

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

için denetleyici içinde option tanımlamak yoktu sanırım

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

güncelleme

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

Kullanım ngOptions ng-modeli ile itwork sahip olmak için: Sadece çalıştık

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