Question

我目前正在努力映射层叠下拉列表的价值 - 由由角度控制器构造的树驱动的数据 - 到基元用于回发到MVC控制器的字符串。

我有一个数据树来填充级联下拉列表，其基本格式为

public class Series
{    
    public string Text { get; set; }
    public virtual ICollection<Depth> Depths { get; set; }
}

public class Depth
{
    public int Id { get; set; }
    public double Value { get; set; }
    public string Text { get; set; }
}

然后使用angular将其映射到输出，这是一个MVC类型模型：

public class LineItemViewModel
{
    public string Series { get; set; }
    public double Depth { get; set; }
}

使用角度控制器，其中joistGroup是在控制器创建时填充的系列列表。

HTML：

<div class="initialRow row"
     ng-repeat="joist in floor.Joists">
    <select name="series" class="form-control" 
            data-ng-model="series"
            data-ng-options="s as s.Text for s in joistGroup.Series"
            data-ng-change="joist.Series = series.Text">
        <option></option>
    </select>
    <select name="depth" class="form-control"
            data-ng-model="depth"
            data-ng-options="d as d.Text for d in series.Depths"
            data-ng-change="joist.Depth = depth.Value;"
            data-rule-required="true">
        <option></option>
    </select>
</div>

角度控制器：

var app = angular.module('MaterialListModule', []);
app.controller('MaterialListController', function($scope, $filter, $http) {
    $scope.getMaterialList = function() {
        $http.get('url for get call')
         .success(function(data, status, headers, config) {
            $scope.Model = data;
        });
    }

    $scope.getProducts = function (productSource) {   
        $http.get('url for get')
         .success(function (data, status, headers, config) {
            $scope.allItems = data;
            $scope.joistGroup = $filter('filter')($scope.allItems, { Text: 'Joists' }, true)[0];
        }).finally(function() {
            $scope.getMaterialList();
        });
    }

    $scope.getProducts("All");
});

目前我正在使用ng-change来触发更新回原点的原语到MVC控制器，但由于这是一个创建和编辑页面，这不起作用因为我已经有一个选定的系列。我想我可以通过ng-init来实现它但没有取得任何成功。

任何人都可以指出我的最佳实践方向来映射复杂的模型级联下拉到原始和后退？

Answer 1

不是将ng-change内联编写，而是将其连接到函数。在该功能中，您可以访问复杂对象＆＃39;并做任何你想做的事情。

$scope.depthChange = function() {
   $scope.myPrimitive = $scope.depth.Value;
   //Do something with primitive
}

此外，当您已选择某些内容时，在初始化/检索数据时，只需将$scope.depth设置为应选择的复杂对象

Angular.js级联下拉列表 - 映射两个模型

1 个答案: