Question

我通过Angular生成网格，每行都有一个下拉列表。我希望下拉列表填充来自服务器的数据，但是在页面加载期间，它需要将每个下拉列表的选定项目设置为它所绑定的属性的值。以下简单例子......

Class CategoryField
  ID
  名称
  CategoryID = 2

选择
选项1文本=类别A值= 1
Option2 text = B类值= 2＆lt; ---此项应在加载时选择。

我的代码似乎在页面源的每个下拉列表中的项目上都有一个选定的属性，但下拉列表正在加载并选择空白项目的角度添加。网格代码如下：更新代码

<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-options的表达式，我们会将所选项目的值设置为CategoryID属性，即类别{{1}的每个选项的可见名称} property，我们将所有定义的Name类别作为选项传递：

$scope.categories

这是我放在一起的工作示例：http://plnkr.co/edit/CXZaUYfqcIv7PbeUrT9j?p=preview

Answer 2

我能够找出绑定的另一面，以便更新mvc模型以便回发。我只是创建了一个绑定到同一属性的隐藏字段。当角度模型更新时，它也更新了隐藏字段的值。以下是需要它的人的语法。

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

AngularJS NG-Repeat在页面加载时选择并设置选择？

2 个答案: