angularjs - AngularJS如何更新输入收音机UI？

问题描述

如何设置无线电输入的默认值？ ctrl.teamSelectionOption = {value:'createTeam'};
然后在数据从服务器返回时更新它？ ctrl.teamSelectionOption = {value:'chooseTeam'};
从模板中，我如何检查已选择的输入？ <button class="btn btn-sm btn-primary" ng-click="$ctrl.getTeamOption($ctrl.teamSelectionOption.value)" >Select</button>

这些问题都是密切相关的。这大致是我现在所拥有的：

(function(angular) {
  'use strict';
angular.module('app').component('bringTeamToEvent', {
  templateUrl: '/assets/ng/app/team/bringTeamToEvent.html',
  bindings: {
    teamSelectionOption: '<',
    teamFeesPanel: '<'
  },
  controller: function($http){

    var ctrl = this;
    ctrl.teamFeesPanel = false;
    ctrl.teamSelectionOption = {value:'createTeam'};


    $http({
      method: 'GET',
      url: '/team',
    }).then(response => {
      this.teams = response.data;
      // console.log(response.data);
    }, response => {      

      if(ctrl.teams.length > 0 ? true : false){
        ctrl.teamSelectionOption = {value:'chooseTeam'};
      }
  
      if(ctrl.teams.length == 0 ? true : false){
        ctrl.teamSelectionOption = {value:'createTeam'};
      }
      
    });

    <div class="teamSelectionPanel" ng-show="!$ctrl.teamFeesPanel">
        <div ng-if='$ctrl.teams.length > 0'>            
            <input ng-model="$ctrl.teamSelectionOption.value" type="radio" name="team" value="chooseTeam" ng-checked="($ctrl.teamSelectionOption.value==chooseTeam)">
            <label for="chooseTeam">Choose an existing team</label><br>
            
            <select class="form-control" ng-model="$ctrl.teamSelection" ng-options="team.name for team in $ctrl.teams track by team.id">
                <!-- ng-change="$ctrl.onTeamSelectCallback(value)" -->            
            </select><br>    
        </div>
        
        <!-- active? -->
        <input ng-model="ctrl.teamSelectionOption.value" type="radio" name="team" value="createTeam" ng-checked="($ctrl.teamSelectionOption.value==createTeam)">          
        <label for="createTeam">Create new team</label><br>                        
    </div>

示例插件： https ://plnkr.co/edit/8B59uBiz6sJ2x6CK ?preview

标签： angularjs

现在我在控制器中使用 $scope，我试图避免这种情况，因为我听说这是不好的做法，但我看不到另一种方式。

1 问题是尝试直接使用该值，而是更新了我的模型以访问文档建议的名称： https ://docs.angularjs.org/api/ng/input/input%5Bradio%5D

<input type="radio" ng-model="teamSelectionOption.name" value="choose">choose<br>
<input type="radio" ng-model="teamSelectionOption.name" value="create">create<br>

设置默认选项并更新它就像在控制器中一样完成

    $scope.teamSelectionOption = {
      name: 'create'
    };

然后在模板中访问。 {{teamSelectionOption.name}}

angularjs - AngularJS如何更新输入收音机UI？

问题描述

解决方案

推荐阅读