Question

我尝试使用angular的select / ng-options来处理没有ID的复杂对象。特别是，数据可能看起来像这样（一组帐户）：

        this.items = [
            {
                prefix: 123,
                number: 111111111,
                bankCode: "0100"
            },
            {
                prefix: 456,
                number: 22222222,
                bankCode: "0200"
            },
            {
                prefix: 789,
                number: 33333333,
                bankCode: "0300"
            }
        ];

我希望有一个包含此数组中项目的选择框，使用自定义角度过滤器格式化（格式＆＃34;前缀数字/ bankCode＆＃34;）。选择项目时，应将其存储在controller.selected中作为复杂的帐户项目，例如

            this.selected = {
                prefix: 123,
                number: 111111111,
                bankCode: "0100"
            };

现在，使用剪切的波纹管可以正常工作。

＆＃13;

var myApp = angular.module('myApp', [])
        .filter('accountNumberFilter', function () {
            return function (input) {
                return input.prefix + "–" + input.number + "/" + input.bankCode;
            };
        })
        .controller('MyCtrl', function () {
            this.selected = null;
            this.items = [
                {
                    prefix: 123,
                    number: 111111111,
                    bankCode: "0100"
                },
                {
                    prefix: 456,
                    number: 22222222,
                    bankCode: "0200"
                },
                {
                    prefix: 789,
                    number: 33333333,
                    bankCode: "0300"
                }
            ];

        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl as ctrl">
    <select
            ng-model="ctrl.selected"
            ng-options="acct | accountNumberFilter for acct in ctrl.items">
        <option value=""></option>
    </select>
    <pre>Selected: 
{{ ctrl.selected | json : spacing }}</pre>
</div>

＆＃13;

当我从一个页面导航到另一个页面时，问题是，将所选项目存储到服务中。返回带有选择框的页面后（例如，在ctrl.selected中有一个项目），选择了选择框中没有项目。我知道这是由于对象不平等，所以我正在寻找一种方法来判断角度＆＃34;两个帐户项目被认为是相等的iif前缀==前缀＆amp;＆amp;数字==数字＆amp;＆amp; BANKCODE == BANKCODE＆＃34;

这个剪辑证明了这种情况（上面唯一的区别是控制器有

this.selected = { prefix: 123, number: 111111111, bankCode: "0100" };

＆＃13;
＆＃13;
var myApp = angular.module('myApp', []) .filter('accountNumberFilter', function () { return function (input) { return input.prefix + "–" + input.number + "/" + input.bankCode; }; }) .controller('MyCtrl', function () { this.selected = { prefix: 123, number: 111111111, bankCode: "0100" }; this.items = [ { prefix: 123, number: 111111111, bankCode: "0100" }, { prefix: 456, number: 22222222, bankCode: "0200" }, { prefix: 789, number: 33333333, bankCode: "0300" } ]; });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="MyCtrl as ctrl"> <select ng-model="ctrl.selected" ng-options="acct | accountNumberFilter for acct in ctrl.items"> <option value=""></option> </select> <pre>Selected: {{ ctrl.selected | json : spacing }}</pre> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

您需要将this.items存储在其他位置，以便每次实例化控制器时都不会销毁它并重新创建它。因为那时它是一个新的对象数组，它不会与你保存的内容相等。也许也把它投入到服务中。

具有复杂对象的AngularJS ng-options（没有唯一标识符）

1 个答案: