html - 如何根据 Angular 中的数据动态填充选择框

Question

我有一个选择框，它使用 ng-repeat 填充数组中的数据。该数组包含名字、姓氏和用户名等信息。默认情况下，我想在选择框中显示名字和姓氏。如果这两个字符串为空，我想改为显示用户名。有谁知道实现此目标的最佳方法？

我当前显示名字和姓氏的 HTML 代码为空，这两个值是空的:

<div ng-app="myApp" ng-controller="MyController as ctrl">
  <select   ng-model="ctrl.user">
     <option ng-repeat="option in ctrl.userList" value="{{option.userName}}"                            
        {{option.firstName}} {{option.lastName}}</option>
  </select>
</div>

我的数组 Controller 代码片段:

var userList = [{"firstName": "Steve", "lastName": "Miller", "userName": "miller"}, {"firstName": "Anne", "lastName": "Jones", "userName": "jones"}, {"firstName": "", "lastName": "", "userName": "mrX"}];

Answer 1

检查表达式中的任何字符串，如果没有则显示option.userName

<div ng-app="myApp" ng-controller="MyController as ctrl">
    <select   ng-model="ctrl.user">
      <option ng-repeat="option in ctrl.userList" value="{{option.userName}}"                            
        {{(option.firstName || option.lastName) ? option.firstName + ' ' +
     option.lastName : option.userName }}</option>
    </select>
    </div>