绑定 <select>使用ng-options和ng-model，其中模型具有组合键

Question

I have an Angular service that returns a list of objects that have a "composite" key made up of two parts. I don't see how I can write the bindings so that they properly re-bind existing data. Here's my current attempt:

 angular.module("app", []) .controller("fooCtrl", function() { // This comes from an Angular service / back-end: this.options = [ { part1: 3, part2: 101, displayName: "Option 3-101" }, { part1: 4, part2: 651, displayName: "Option 4-651" }, { part1: 4, part2: 999, displayName: "Option 4-999" } ]; this.item = { selectedOption: { part1: 4, part2: 651 } }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <div ng-app="app" ng-controller="fooCtrl as vm"> <select ng-options="option.displayName for option in vm.options track by part1 + '-' + part2" ng-model="vm.item.selectedOption"></select> <hr> Debug info: <pre>{{vm.item | json}}</pre> </div> 

However, the above does not work: it should be selecting "Option 4-651" on loading, but doesn't do this.

Note that the displayName is added client side to the options, but it is not in the selectedOption when it is loaded. I don't mind if the selectedOption becomes an object that does have the displayName property, the back-end will just ignore it anyways because there is no equivalent backing property for it (I use C# in the back-end, the server-side DTO has no displayName property).

Important: I'm trying to do this without changing the loading in the javascript and structure of the options and selectedOption . Specifically:

• I understand I can put some logic at the end of the controller method to "reset" this.item to a reference to the actual entry in options , but in my real code it's not so trivial (for one because async loading of options and selectedOption is involved).
• I also understand I could change both the selectedOption and individual options so the "composite key" is also available as a "single compound key" eg part1and2: "3-101" , but this requires me to admit (knowing that) I have an XY-Problem: I can't easily change the structure of those, because I'm cheating by binding my UI to the DTOs coming from the back-end, instead of having a proper view model to bridge the gap.

Is there a way to do this with a track by expression, ie is there a way to elegantly solve this in the binding expressions? Or do I have to resort to fixing this in controller or service code?

Answer 1

一个简单的解决方案是，在绑定JavaScript对象之前对其进行重组，以使其具有另一个名为part12属性，然后按该属性进行跟踪：）

Answer 2

If the displayName is part of the JSON response then you should add that aswell to the selectedOption when you set the option in the controller.

Here's a working example of how you could do it without it (if you have the display name in the default selectedOption then add "option as option.displayName.." instead)

 angular.module("app", []) .controller("fooCtrl", function() { // This comes from an Angular service / back-end: this.options = [ { part1: 3, part2: 101, displayName: "Option 3-101" }, { part1: 4, part2: 651, displayName: "Option 4-651" }, { part1: 4, part2: 999, displayName: "Option 4-999" } ]; this.item = { selectedOption: { part1: 4, part2: 651} }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <div ng-app="app" ng-controller="fooCtrl as vm"> <select ng-options="option as ('Option ' + option.part1 + '-' + option.part2) for option in vm.options track by (option.part1 +'-'+ option.part2)" ng-model="vm.item.selectedOption"></select> <hr> Debug info: <pre>{{vm.item | json}}</pre> </div>