Question

我正在使用一些相当复杂的数据（下面简化）。这里我有一个选择器列表列表，每个列表都在其JSON数据中指定了id。然后，我有一个文本列表，需要在指定的（通过文本的listid）选择器列表（避免＆＃39; t）中绑定指定的字段（我已经对该位进行了排序）得到了那一点）。

这就是我在js控制器文件中的数据：

angular.module('myApp',[])
.controller('myCtrl',function($scope,$timeout){
    $scope.selectorLists=[
        {
            'id': 3,
            'name': 'SelectionList ABC',
            'rows': [
                {'id':5, 'name':'ABCrow 5', 'Afield1': 'ABCrow5field1', 'Afield2': 'ABCrow5field2'}, 
                {'id':9, 'name':'ABCrow 9', 'Afield1': 'ABCrow9field1', 'Afield2': 'ABCrow9field2'}
             ]
        },
        {
            'id': 5,
            'name': 'SelectionList XYZ',
            'rows': [
                {'id':1, 'name':'XYZrow 1', 'Xfield1': 'XYZrow1field1', 'Xfield2': 'XYZrow1field2'}, 
                {'id':2, 'name':'XYZrow 2', 'Xfield1': 'XYZrow2field1', 'Xfield2': 'XYZrow2field2'}
             ]
        }
    ];

    $scope.texts=[
        {'id': 453,
         'name': 'Input Text1',
         'listid': 3,
         'listrowid': 9,
         'listfieldname': 'Afield1'
        },
        {'id': 454,
         'name': 'Input Text2',
         'listid': 5,
         'listrowid': 2,
         'listfieldname': 'Xfield2'
        }
    ];

});

这就是html的样子：

<div ng-app="myApp" ng-controller="myCtrl">

    <div ng-repeat='selectionList in selectorLists'>
        <label for="ddl{{selectionList.id}}">{{selectionList.name}}:</label>
        <select id="ddl{{selectionList.id}}" ng-model="selectionList.selectedRow"                 
                ng-options="row as row.name for row in selectionList.rows" ></select>
    </div>

    <div ng-repeat='text in texts'>
        <label for='txt{{text.id}}'>{{text.name}}</label>
        <input type="text" id='txt{{text.id}}' value='{{selectorLists[id=text.listid].selectedRow[text.listfieldname]}}'   />
    </div>

</div>

我可以在我的控制器中使用$filter并在那里获得正确的列表，但我需要让它将其选定的值绑定到我的文本输入（通过传入text.listid）。

    var listid = 5;
    var result = $filter('filter')($scope.selectorLists, {id:listid})[0];

我还需要能够在选择器列表中初始化选定的值，方法是循环浏览我的文本并遇到引用列表的第一个listid，和有一个listrowid设置（即任意值＆gt; 0; 0定义为该文本选择无），或者通过执行服务器端并仅设置selectedRowId（或者，更好的是，设置{ {1}}）在每个选择器列表中。我只是不确定如何使用这两种方式在html selectedRow对象中设置所选项目。

由于我对angularjs完全陌生，所以只需向正确的方向轻推即可。

哦，是的，here's the fiddle。

Answer 1

好的，所以我找到了一个相当基本的基于javascript的解决方案，但如果有人有任何指示，我会很高兴看到/使用更多的角度。

所以，将这些添加到我的控制器中（是的，一些重复的代码，所以我肯定会重构这个）：

    $scope.getSelectedValue = function(selectorListId, fieldname) {
        for (var i = 0, len = $scope.selectorLists.length; i < len; i++) {
          if ($scope.selectorLists[i].id === selectorListId) {
            return $scope.selectorLists[i].selectedRow[fieldname];
          }
        }
    };
    $scope.getSelectedRow = function(selectorList) {
        for (var i = 0, len = selectorList.rows.length; i < len; i++) {
          if (selectorList.rows[i].id === selectorList.selectedRowId) {
            return selectorList.rows[i];
          }
        }
    };     

    //will add selectedRowid server-side so now I just iterate over the selectorLists and
    //then call the function that iterates over the rows looking for the right id
    for (var i = 0, len = $scope.selectorLists.length; i < len; i++) {
        $scope.selectorLists[i].selectedRow = $scope.getSelectedRow($scope.selectorLists[i]);
    }

根据我的输入，我现在用value='{{getSelectedValue(text.listid, text.listfieldname)}}'

调用第一个函数

full jsfiddle is here。

<强>更新

重新编写了一些代码，我现在已经进入了我的js控制器文件：

    $scope.getById = function(items, id) {
         for (var i = 0, len = items.length; i < len; i++) {
          if (items[i].id === id) {
            return items[i];
          }
        }       
    }


    for (var i = 0, len = $scope.selectorLists.length; i < len; i++) {
        $scope.selectorLists[i].selectedRow = $scope.getById($scope.selectorLists[i].rows, $scope.selectorLists[i].selectedRowId);
    }

输入值现在设置为value='{{getById(selectorLists, text.listid).selectedRow[text.listfieldname]}}'和here's the latest fiddle。

通过其JSON数据动态绑定输入值以选择列表＆＃39; id＆＃39;

1 个答案: