Question

我正在尝试根据我的angularjs响应填充html表中的行。我的目标是使我的表数据单元格为下拉格式。

要求：

下拉菜单中将包含三个值（A，B和C）。
初始值应该是在 angularjs响应。
下拉列表的其他值应该是响应中未获得的其余值。

详细信息：

我有此表行：

<tbody>
   <tr valign="middle" st-select-row="row" st-select-mode="multiple" ng-repeat="row in display_republish_records" id="{{row.botMainId}}">
      <td><select class="custom-select" style="margin-left:0px" ng-model="botId" ng-options="choice.name for choice in botIds"></select></td>
      <td ng-bind="row.botSet"></td>
      <td ng-bind="row.botNumber"></td>
   </tr>
</tbody>

而且，我具有以下格式的响应数据：

0: {botMainId: "A", botSet: "HK64604", botNumber: "786443174705883702", $$hashKey: "object:27"}
1: {botMainId: "A", botSet: "HK65825", botNumber: "595143174706013402", $$hashKey: "object:28"}
2: {botMainId: "A", botSet: "HK67383", botNumber: "281943174706142702", $$hashKey: "object:29"}
3: {botMainId: "B", botSet: "HK72557", botNumber: "922443174706654102", $$hashKey: "object:30"}
4: {botMainId: "B", botSet: "HK73332", botNumber: "724243174706716502", $$hashKey: "object:31"}
5: {botMainId: "A", botSet: "HK74025", botNumber: "379943174706764502", $$hashKey: "object:32"}
6: {botMainId: "A", botSet: "HK74694", botNumber: "825843174706807002", $$hashKey: "object:33"}
7: {botMainId: "C", botSet: "HK74819", botNumber: "563543174706827202", $$hashKey: "object:34"}
8: {botMainId: "C", botSet: "HK75964", botNumber: "423643174706902802", $$hashKey: "object:35"}
9: {botMainId: "B", botSet: "HK76384", botNumber: "678043174706923902", $$hashKey: "object:36"}

根据此数据，第一行，第二行和第三个dow的下拉列表应将初始值保留为A，然后将B，C保留为其他下拉值。

第四行和第五行应将B用作初始值，将C和A保留为其他下拉值，依此类推。

现在，我到目前为止所尝试的js：

$http({
                                    'url' : '/myURL',
                                    'method' : 'POST',
                                    'headers' : {
                                        'Content-Type' : 'application/json'
                                    }
                                }).then(function(response) {
                                    console.log(response.data);
                                    var arrayLength = response.data.length;
                                    for (var i = 0; i < arrayLength; i++) {
                                       /* console.log(response.data[i].botMainId);*/
                                        var botRuleCode1 = null;
                                        var botRuleCode2 = null;
                                        var botRuleCode3 = null;
                                        if (response.data[i].botMainId == 'A'){
                                            botRuleCode1 = 'A';
                                            botRuleCode2 = 'B';
                                            botRuleCode3 = 'C';
                                        } else if (response.data[i].botMainId == 'B'){
                                            botRuleCode1 = 'B';
                                            botRuleCode2 = 'A';
                                            botRuleCode3 = 'C';
                                        } else {
                                            botRuleCode1 = 'C';
                                            botRuleCode2 = 'B';
                                            botRuleCode3 = 'A';
                                        }
                                        $scope.botIds = [ {
                                            id : botRuleCode1,
                                            name : botRuleCode1
                                        }, {
                                            id : botRuleCode2,
                                            name : botRuleCode2
                                        }, {
                                            id : botRuleCode3,
                                            name : botRuleCode3
                                        }];

                                        $scope.botId = $scope.botIds[0];
                                    }
                                    $scope.botData = response.data;

                                    $window.scrollTo(0, 0);

                                })

此脚本将采用为所有下拉列表设置的for的最后一个值，为所有行设置一个通用的下拉值。

有人可以帮助我如何更改此代码吗？

Answer 1

代码的问题在于，ngModel中的每一行都使用相同的repeater botId。

最好有一个不同的对象来存储每个项目的选择值，因此您可以在API调用返回数据后立即填充它。像这样的东西说明了所描述的方法：

angular.module("myApp", [])
    .constant('POSSIBLE_OPTIONS', ['A', 'B', 'C'])
    .controller("MyController", ['POSSIBLE_OPTIONS', function (POSSIBLE_OPTIONS) {
        var ctrl = this;

        ctrl.display_republish_records = [
            {botMainId: "A", botSet: "HK64604", botNumber: "786443174705883702"},
            {botMainId: "A", botSet: "HK65825", botNumber: "595143174706013402"},
            {botMainId: "A", botSet: "HK67383", botNumber: "281943174706142702"},
            {botMainId: "B", botSet: "HK72557", botNumber: "922443174706654102"},
            {botMainId: "B", botSet: "HK73332", botNumber: "724243174706716502"},
            {botMainId: "A", botSet: "HK74025", botNumber: "379943174706764502"},
            {botMainId: "A", botSet: "HK74694", botNumber: "825843174706807002"},
            {botMainId: "C", botSet: "HK74819", botNumber: "563543174706827202"},
            {botMainId: "C", botSet: "HK75964", botNumber: "423643174706902802"},
            {botMainId: "B", botSet: "HK76384", botNumber: "678043174706923902"}
        ];

        ctrl.posibbleOptions = getUniqueValuesV2(ctrl.display_republish_records, 'botMainId')
            .map(optionsMapper);

        ctrl.posibbleOptionsFromConstant = POSSIBLE_OPTIONS
            .map(optionsMapper);

        ctrl.selectionModel = {};

        angular.forEach(ctrl.display_republish_records, function (bot) {
            ctrl.selectionModel[bot.botNumber] = ctrl.posibbleOptions.filter(function (opt) {
                return opt.id === bot.botMainId;
            })[0];
        });

        function optionsMapper(id) {
            return {
                id: id,
                name: id
            }
        }


        function getUniqueValues(array, prop) {
            return [...new Set(array.map(item => item[prop]))];
        }
        
        function getUniqueValuesV2(array, prop) {
          return array.map(function(item) {
                      return item[prop];
                    }).filter(function(item, i, ar){ 
                      return ar.indexOf(item) === i;  
                    });
        }

    }]);

pre {
    max-width: 100%;
    word-break: break-word;
    white-space: pre-wrap;
}

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController as $ctrl">
    <hr/>

    <table>

        <tr valign="middle" st-select-row="row" st-select-mode="multiple"
            ng-repeat="row in $ctrl.display_republish_records track by row.botNumber"
            ng-attr-id="{{::row.botMainId}}-{{::row.botNumber}}">
            <td>
                <select class="custom-select" style="margin-left:0px" ng-model="$ctrl.selectionModel[row.botNumber]"
                        ng-options="choice.name for choice in $ctrl.posibbleOptions track by choice.id">
                    <option value="" hidden readonly="" ng-hide="true"></option>
                </select>
            </td>
            <td ng-bind="row.botSet"></td>
            <td ng-bind="row.botNumber"></td>
        </tr>

    </table>


    <hr/>

    <h3>Debug info:</h3>

    <code>
        <pre>{{$ctrl.posibbleOptionsFromConstant}}</pre>
    </code>
    <hr/>

    <code>
        <pre>{{$ctrl.posibbleOptions}}</pre>
    </code>
    <hr/>

    <code>
        <pre>{{$ctrl.selectionModel}}</pre>
    </code>

</div>

Answer 2

您好，我有一个为这种情况创建的示例，但希望对您有帮助。

ListView

使用angularjs在html中的表格数据单元上显示下拉菜单

2 个答案: