AngularJS NG-Repeat選擇頁面加載時選擇並設置？

Question

我通過Angular生成一個網格，每一行都會有一個下拉菜單。我希望下拉菜單使用來自正在工作的服務器的數據填充，但在頁面加載期間，它需要將每個下拉菜單的選定項目設置爲其綁定的屬性的值。下面簡單的例子...

類CategoryField
ID
名稱
類別ID = 2

選擇
選項1文本=類別的值= 1
選項2文本= B類值= 2 < - - 這個項目應該在加載時選擇。

代碼我似乎有一個在頁面源每個下拉列表中的項目選定的屬性，但下拉列表正在加載並選擇空白項目角添加。下面的代碼下面

<div ng-app="CategoryFieldsApp"> 

Search:<input ng-model="search" type="text" placeholder="Search" /> 

@using (Html.BeginForm("CategoryFields", "Maintenance", FormMethod.Post)) 
{ 
    <div ng-controller="CategoryFieldsCtrl"> 
     <table class="table table-striped table-hover"> 
      <thead> 
       <tr> 
        <th></th> 
        <th width="200">Category</th> 
        <th ng-click="sort('Name')" width="200">Name</th> 
        <th width="150">Active</th> 
       </tr> 
      </thead> 
      <tbody id="CategoryFieldGrid"> 
       <tr dir-paginate="categoryField in categoryFields|orderBy:sortKey:reverse|filter:search|itemsPerPage:10"> 
        <td> 
         <input type="hidden" name="CategoryFields[{{$index}}].CategoryFieldID" ng-model="categoryField.CategoryFieldID" /> 
        </td> 
        <td> 
         <input class="hdnCategoryID" type="hidden" name="CategoryFields[{{$index}}].CategoryID" /> 
         <select ng-model="categoryField.CategoryID" ng-options="category.CategoryID as category.Name for category in categories"></select> 
        </td> 
        <td> 
         <input type="text" name="CategoryFields[{{$index}}].Name" ng-model="categoryField.Name" /> 
        </td> 
        <td> 
         <input type="checkbox" class="active checkBox checkbox-inline" value="{{categoryField.Active}}" ng-model="categoryField.Active" name="CategoryFields[{{$index}}].Active" /> 
        </td> 
        <td> 
         <input type="button" ng-click="remove($index)" value="Remove" /> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
     <dir-pagination-controls max-size="5" 
           direction-links="true" 
           boundary-links="true"> 
     </dir-pagination-controls> 
     <br /> 
     <a class="btn btn-default" ng-click="add()">Add Category Field</a> 
     <input class="btn-primary btn-sm" type="submit" value="Save" /> 
    </div> 
} 

<script> 
var App = angular.module('CategoryFieldsApp', ['angularUtils.directives.dirPagination']).controller('CategoryFieldsCtrl', function ($scope, $http) { 

    $http.get("@Url.Action("GetCategoryFields", "Maintenance")").success(function (response) { 
     $scope.categoryFields = response; //ajax request to fetch data into $scope.data 
    }); 
    $http.get("@Url.Action("GetCategories", "Maintenance")").success(function (response) { 
     $scope.categories = response; //ajax request to fetch data into $scope.data 
    }); 

    $scope.sort = function (keyname) { 
     $scope.sortKey = keyname; //set the sortKey to the param passed 
     $scope.reverse = !$scope.reverse; //if true make it false and vice versa 
    } 

    $scope.remove = function (index) { 
     $scope.categoryFields.splice(index, 1); 
    }; 

    $scope.add = function() { 
     $scope.categoryFields.push({ 
      CategoryFieldID: 0, 
      CategoryID: 0, 
      Name: '', 
      Active: true, 
      ShowRemove: true 
     }); 
    }; 
}); 


//$(document).ready(function() { 

// $('#CategoryFieldGrid tr').each(function (i, row) { 
//  var categoryID = $(row).find('.hdnCategoryID').val(); 
//  console.log(categoryID); 
//  $(row).find('.ddlCategories').val(categoryID); 
// }); 

// $('.ddlCategories').on('change', function (e) { 
//  var hidden = $(e.target).closest('tr').find('.hdnCategoryID'); 
//  $(hidden).val($(e.target).closest('tr').find('.ddlCategories').val()); 
// }); 
//}); 

Answer 1

你有沒有考慮使用ng-options格...更新的代碼？它可以被用來代替你的選擇了明確的定義：

<select ng-model="categoryField.CategoryID" ng-options="category.CategoryID as category.Name for category in categories"></select> 

如果你打破我們傳遞給NG選項的表達，我們設置所選項目到CategoryID屬性的值，可見光每個選項的Name類別屬性的名稱，我們傳遞的所有類別定義$scope.categories作爲選項：

"category.CategoryID as category.Name for category in categories" 

這裏有一個工作的例子，我放在一起：http://plnkr.co/edit/CXZaUYfqcIv7PbeUrT9j?p=preview

Answer 2

我能夠找出綁定的另一端，以便mvc模型更新回發。我只是創建了一個綁定到相同屬性的隱藏字段。當角度的ng模型更新時，它也更新隱藏域的值。以下是需要它的人的語法。

      <input class="hdnCategoryFieldID" type="hidden" name="CategoryFieldApprovers[{{$index}}].CategoryFieldID" value="{{categoryFieldApprover.CategoryFieldID}}" /> 
         <select ng-model="categoryFieldApprover.CategoryFieldID" ng-options="categoryField.CategoryFieldID as categoryField.Name for categoryField in categoryFields"></select>