javascript - 在 Angular 单选按钮中绑定(bind)单个 ng-model 以获得 2 ng-repeat

Question

我有两个不同的列表，我需要将其显示为页面上的单个列表并在屏幕中显示为单选项目。如果未选择任何元素，或者如果用户选择默认值，则如何识别 ng-model 和选定的值。

<script>
   angular.module('valueExample', [])
     .controller('ExampleController', ['$scope', function($scope) {
       $scope.names = ['pizza', 'unicorns', 'robots'];
       $scope.my = { favorite: 'unicorns' };
     }]);
</script>
 <form ng-controller="ExampleController">
   <h2>Which is your favorite?</h2>
     <label ng-repeat="name in names" for="{{name}}">
       {{name}}
       <input type="radio"
              ng-model="my.favorite"
              ng-value="name"
              id="{{name}}"
              name="favorite">
     </label>
   <label ng-repeat="name in names2" for="{{name}}">
       {{name}}
       <input type="radio"
              ng-model="my.favorite"
              ng-value="name"
              id="{{name}}"
              name="favorite">
     </label>
   <div>You chose {{my.favorite}}</div>
 </form>

names和names2是2个列表项，我想在单个屏幕上显示

Answer 1

As I suggested, you can concat lists and use ng-repeat accordingly. Or you can use ng-repeat-start and ng-repeat-end and render accordinly.

 angular.module('valueExample', [])
   .controller('ExampleController', function($scope) {
     var names1 = ['pizza1', 'unicorns1', 'robots1'];
     var names2 = ['pizza2', 'unicorns2', 'robots2'];
     $scope.names = names1.concat(names2);
     $scope.my = {
       favorite: 'unicorns1'
     };
   });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<form ng-app="valueExample" ng-controller="ExampleController">
  <h2>Which is your favorite?</h2>
  <div ng-repeat="name in names">
    <input type="radio" ng-model="my.favorite" ng-value="name" />
    <label>{{name}}</label>
  </div>

  <div>You chose {{my.favorite}}</div>
</form>