AngularJSを使用して選択するデータをバインドする

Question

AngularJSを使用してデータをバインドするときに問題があります。私はajaxを使って、書籍の情報とすべてのカテゴリをデータベースから取得し、コントローラの変数$ scopeに割り当てます。一部のフィールドはフォームにバインドされていますが、category_idフィールドは選択できません。

この

は、これは私のconfigコード

gridApp.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){ 
$locationProvider.html5Mode({enabled: true, requireBase: false}); 
$routeProvider 
    .when('/index',{ templateUrl: base_url + 'assets/partials/index.html', controller: 'datagridCtrl' }) 
    .when('/create',{ templateUrl: base_url + 'assets/partials/form.html', controller: 'createCtrl' }) 
    .when('/edit/:id',{ templateUrl: base_url + 'assets/partials/form.html', controller: 'editCtrl' }) 
    .otherwise({ redirectTo: '/index' })}]); 

である私のコントローラ

gridApp.controller('editCtrl',function($scope,$parse,$http,$routeParams,$location,BookService){ 
$http({ 
    url: base_url + 'angular/get-books', 
    method: 'GET', 
    params: {id:$routeParams.id} 
}).then(function(response){ 
    $scope.book = response.data; 
}); 

$http.get(base_url + 'angular/get-categories').then(function(response){ 
    $scope.categories = response.data; 
}); 

$scope.save = function(){ 
    BookService.save($scope.book).success(function(response){ 
     if(response.success){ 
      $location.path('/index'); 
     }else{ 
      angular.forEach(response.message,function(msg,field){ 
       field = field.charAt(0).toUpperCase() + field.substr(1).toLowerCase(); 
       var errorField = 'error'+field; 
       $parse(errorField).assign($scope,msg); 
      }) 
     } 
    }); 
}}); 

ですこれが私の見解コード

<div class="row"> 
<div class="col-sm-12"> 
    <form class="form-horizontal"> 
     <div class="form-group" ng-class="{ 'has-error' : errorName }"> 
      <label class="control-label col-sm-3">Name</label> 
      <div class="col-sm-6"> 
       <input type="text" ng-model="book.name" placeholder="Name" class="form-control"/> 
       <p class="help-block" ng-show="errorName">{{ errorName }}</p> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="control-label col-sm-3">Category</label> 
      <div class="col-sm-6"> 
       <select class="form-control" ng-model="book.category_id" ng-options="item.id as item.name for item in categories track by item.id"> 
        <option value="">Select Category</option> 
       </select> 
      </div> 
     </div> 
     <div class="form-group" ng-class="{ 'has-error' : errorPrice }"> 
      <label class="control-label col-sm-3">Price</label> 
      <div class="col-sm-6"> 
       <input type="text" ng-model="book.price" placeholder="Price" class="form-control"/> 
       <p class="help-block" ng-show="errorPrice">{{ errorPrice }}</p> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="control-label col-sm-3">Special</label> 
      <div class="col-sm-6"> 
       <label class="radio-inline"> 
        <input type="radio" name="special" ng-model="book.special" value="1"/> Yes 
       </label> 
       <label class="radio-inline"> 
        <input type="radio" name="special" ng-model="book.special" value="0"/> No 
       </label> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="control-label col-sm-3">Description</label> 
      <div class="col-sm-6"> 
       <textarea class="form-control" ng-model="book.description" rows="5"></textarea> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-6 col-sm-offset-3"> 
       <button ng-click="save()" class="btn btn-success">Save</button> 
      </div> 
     </div> 
    </form> 
</div> 

であり、これは、データを結合した後の結果でありますにフォーム binding data to form

代わりにNG-オプションディレクティブを使用してのこの問題

Answer 1

を解決する助けてください、私はあなたが選択制御のためにNG・リピートディレクティブを使用することをお勧めします。

ng-repeatとng-optionsの違いはわかります。

ng-repeatは各繰り返しに対して新しいスコープを作成し、ng-optionsと同様に機能しません。

小さなリストの場合は問題ありませんが、大きなリストはng-optionsを使用する必要があります。それとは別に、iteratorを指定する際に多くの柔軟性を提供し、ng-repeat以上のパフォーマンス上の利点を提供します。