Угловая кнопка-переключатель в метке поля

Question

Я использую Angular 1.x для отправки и обработки веб-формы, в частности радиокнопки:

<form name="purchaseForm">
     <div class="radio" ng-repeat="i in cancelTypes.data track by $index">
          <label><input type="radio" ng-model="purchaseAction.cancelReasonId" value="{{i.id}}" />{{i.name}}</label>
     </div>
     <button ng-click="purchaseAction()">Save</button>
</form>

В действии покупки моего контроллера я могу получить доступ к идентификатору опции, выбранному с помощью:

this.purchaseAction.cancelReasonId

Однако что, если мне нужно имя или метка опции, а не идентификатор?Следующее работает, но я не уверен, что это лучший подход:

this.cancelTypes.data[(this.purchaseAction.cancelReasonId-1)].name;

Другой вариант - взять идентификатор и сделать запрос на получение к модели CancelTypes, но я думаю, что это излишне?

Answer 1

Свойство, ограниченное ng-model, равно purchaseAction.cancelReasonId.Атрибут value тега input равен i.id.Вот почему вы получаете id в cancelReasonId.Если вы измените его на i.name, вместо этого вы получите имя.Если вы хотите получить весь объект, вам нужно будет передать только i в синтаксисе интерполяции.И тогда вам также нужно будет позвонить JSON.parse на purchaseAction.cancelReasonId

Попробуйте:

angular.module('app', [])
  .controller('controller', ['$scope', function($scope) {

    $scope.cancelTypes = {
      data: [{
          id: 1,
          name: '1'
        },
        {
          id: 2,
          name: '2'
        },
        {
          id: 3,
          name: '3'
        },
        {
          id: 4,
          name: '4'
        }
      ]
    };

    $scope.purchaseAction = {
      cancelReasonId: null
    };

    $scope.purchaseActionFn = function() {
      console.log(this.purchaseAction);
      console.log(JSON.parse(this.purchaseAction.cancelReasonId));
    }

  }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <form name="purchaseForm">
    <div class="radio" ng-repeat="i in cancelTypes.data track by $index">
      <label>
      <input 
        type="radio" 
        ng-model="purchaseAction.cancelReasonId" 
        value="{{ i }}" />
        {{i.name}}
    </label>
    </div>
    <button ng-click="purchaseActionFn()">
    Save
  </button>
  </form>
</div>