在角度单选按钮中绑定单个 ng 模型以进行 2 ng 重复

Question

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

<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>

名称和名称2

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

Answer 1

正如我所建议的，您可以连接列表并相应地使用 ng-repeat。或者你可以使用 ng-repeat-start 和 ng-repeat-end 并相应地渲染。

 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>