如何使用在角度上选择相同的选项

时间:2016-04-09 03:50:03

标签: angularjs

我有一个关于如何在角度上使用具有相同选项的选项的问题。

我有一个关于用户必须选择他最喜欢的体育项目的一个或多个选项并为所选的每个选项设置标准的示例

这是我的代码:

<div class="form-group m-b-md">
  <selectize config='optionsConfig' options='sports' ng-model=""></selectize>
</div>
<input type="number" min="1" ng-model="" required>

我的选择是:

optionSelect:['soccer', 'basket', 'tennis', 'baseball']

我已经将他的选项推送到像这样的数组

sportsPoints[
  {
    sport: 'futbol',
    points: 10
  },
  {
    sport: 'tennis',
    points: 4
  },
]

但是我必须设置什么样的ng-model,因为如果像sportsOptions一样设置,并选择一个选项,那么select将选择相同的选项!

在这种情况下我该怎么办?

谢谢

1 个答案:

答案 0 :(得分:1)

您可以使用单选按钮:

angular.module('app', []).controller('mainCtrl', function($scope) {
    $scope.selectedSports = [];
  $scope.optionSelect = ['soccer', 'basket', 'tennis', 'baseball'];
  $scope.addSport = function() {
    $scope.selectedSports.push({sport: $scope.sport, points: $scope.points});
    $scope.sport = null;
    $scope.points = null;
  };
})

和html:

<div ng-app='app' ng-controller='mainCtrl'>
  <div ng-repeat="option in optionSelect">
    <input type="radio" name="sport" ng-model="$parent.sport" ng-value="option" />{{option}}
  </div>
  Quantity: <input type="number" name="option" ng-model="points"/>
  <input type="button" ng-click="addSport()" value="Add" ng-disabled="sport == null || points == null" /><br/>
  {{selectedSports}}
</div>

小提琴:http://jsfiddle.net/diegopolido/qgu7otrr/2/