Angularjs 通过JSON数据动态绑定输入值以选择列表'；id'；

我正在处理一些相当复杂的数据（下面有点简化）。这里我有一个选择器列表列表，每个列表的JSON数据中都指定了一个

id

。然后，我有一个文本列表，需要在指定的（通过文本的

listid

）选择器列表（未排序）中绑定指定字段（我已排序该位）

这就是我在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'
        }
    ];

});

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

这就是html的外观：

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'
        }
    ];

});

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

我还需要能够初始化选择器列表中的选定值，方法是在我的文本中循环，遇到引用列表的第一个

listid

，并且设置了

listrowid

（即，任何值>0；0定义该文本未选择任何值），或者在服务器端执行此操作，只需在每个选择器列表中设置一个

selectedRowId

（或者更好地设置

selectedRow

）。我只是不知道如何使用这两种方法在html

select

对象中设置所选项目

由于我对angularjs完全陌生，只要朝着正确的方向轻推一下就好了

---

哦，是的，还有。

好的，我找到了一个相当基本的基于javascript的解决方案，但是如果有人有任何指针，我真的很乐意看到/使用一个角度更大的JS解决方案

因此，将这些添加到我的控制器中（是的，有点重复代码，所以我肯定会重构它）：

输入值现在设置为

值={{getById（selectorLists，text.listid）。selectedRow[text.listfieldname]}}

，和

    $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);
    }