通过单选按钮为 ng-model 赋值

Question

我是 Angular JS 的新手，所以请注意我的错误。我正在尝试通过动态创建的单选按钮为 ng-model 分配一个值。到目前为止，这就是我所拥有的：

<div data-ng-init="radio=['Core','Software Development','Systsmes Analysis','All']">
    <div data-ng-repeat="r in radio">
        <div class="form-check">
            <input class="form-check-input" type="radio" data-ng-model="types" data-ng-value="types='{{r}}'" name="type" id="{{r}}">
            <label class="form-check-label" for="{{r}}">
                {{r}}
            </label>
        </div>
    </div>
    <p>You chose {{types}}</p>
</div>

我可以输出单选按钮，如下所示：

但是我无法输出所选单选按钮的值。

我想要实现的是这样的：

所选单选按钮的值在 "You have chosen x" 中弹出的位置。

非常感谢任何帮助。感谢阅读。

Answer 1

您需要使用带点符号的对象：

angular.module("myApp", [])
  .controller("myCtrl", function($scope) {
    $scope.radio = { type: '' }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-init="radio=['Core','Software Development','Systems Analysis','All']">
    <div ng-repeat="r in radio">
      <div class="form-check">
        <input class="form-check-input" id="{{r}}" type="radio" ng-model="radio.type" ng-value="'{{r}}'" name="type">
        <label class="form-check-label" for="{{r}}">{{r}}</label>
      </div>
    </div>
    <p>You chose {{radio.type}}</p>
  </div>
</div>

通过单选按钮为 ng-model 赋值

Assign value to ng-model via radio button

radio-button

angularjs