Угловая настройка выбора радио по умолчанию в ng-repeat - PullRequest
Новая
       0

Угловая настройка выбора радио по умолчанию в ng-repeat

0 голосов
/ 11 сентября 2018

Я задаю простой вопрос с ответом «да / нет» своим пользователям и хочу выбрать переключатель по умолчанию. Проблема в том, что у меня может быть любое количество этих вопросов, представленных пользователю.

Это мой код: 

<div ng-form ng-repeat="i in offers track by $index" name="messageForm[$index]">  
     <div data-ng-repeat="option in closeListingOptions" class="radio">
          <label>
               <input type="radio" name="close" ng-model="i.close" value="{{option.id}}" ng-checked="option.checked" />{{option.name}}</strong>
          </label>
     </div>
</div>

Мои параметры установлены следующим образом: 

$scope.closeListingOptions = [
        {
            id: "1",
            name: "Yes please",
            checked: true
        },
        {
            id: "0",
            name: "No thanks",
            checked: false
        }     
];

Приведенный выше пример работает, и отметьте / задайте «да» как ответ по умолчанию. Однако до тех пор, пока я не выберу опцию вручную с помощью щелчка мыши, значение не будет привязано к модели.

Я читал, что ng-select не должен использоваться с ng-options, но я не уверен, как еще я могу достичь этой цели? Кажется, мне нужно что-то вроде: 

i.close = "1":

Но как я могу установить это для неизвестного количества, так как я не знаю, сколько вопросов будет представлено?

Ответы [ 3 ]

0 голосов
/ 11 сентября 2018

1- Вместо value={{something}} вы можете использовать директиву ng-value.

2- Каждый входной пакет должен иметь свой конкретный name.

Вот рабочий пример: 

var app = angular.module("app", []);

app.controller("MainCtrl", function($scope) {

  $scope.offers = [{
      number: 1
    },
    {
      number: 2
    }
  ];


  $scope.closeListingOptions = [{
      id: "1",
      name: "Yes please",
      checked: true
    },
    {
      id: "0",
      name: "No thanks",
      checked: false
    }
  ];
});
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-form ng-repeat="i in offers" name="messageForm[$index]">
    <div data-ng-repeat="option in closeListingOptions" class="radio">
      <label>
               <input type="radio" name="close-{{i.number}}" ng-model="i.close" ng-value="option.id" ng-checked="option.checked" />{{option.name}}</strong>
          </label>
    </div>
    {{i}}
    <hr>
  </div>

</body>

</html>
0 голосов
/ 12 сентября 2018

Я не смог достичь своей цели с помощью следующего: 

<div data-ng-repeat="option in closeListingOptions" class="radio" ng-init="i.closeListing = 1">
  <label>
    <input type="radio" name="close-{{i.id}}" ng-model="i.closeListing" ng-value="{{option.id}}" />
        <strong>{{option.name}}</strong>
    </label>
</div>

Решением было использование ng-init

0 голосов
/ 11 сентября 2018

Вы должны попробовать это: 

<input type="radio" name="close" 
    ng-model="option.checked" value="{{option.id}}"
    ng-checked="option.checked" />{{option.name}}</strong>

Это ng-model обновит ключ checked вашего массива данных, а затем вы сможете получить все выбранные переключатели в соответствии с их идентификаторами из этой единственной переменной.

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...