Question

嘿，我有一个“差点”工作小提琴。我有一个项目列表，如果选择了radiobutton，我想更改它们的值。这是代码：

CodePen： http://codepen.io/anon/pen/MyvQoP

HTML：

<div ng-app="myapp" ng-controller="myController">
  <div ng-repeat="food in foodList">
    <span>{{food.name}}</span>
    <input type="radio" ng-model="food.selected" name="radiofood" ng-value="true">
  </div>
</div>

JS：

angular.module('myapp', []).controller("myController", myController)

function myController($scope) {
  $scope.foodList = [
    {
      name: 'banana',
      selected: 'false'
    },
    {
      name: 'orange',
      selected: 'false'
    },
    {
      name: 'apple',
      selected: 'false'
    }
  ]
}

问题：
单击一个radiobutton，将其值更改为 true ，但单击另一个不会将之前的值更改为 false 。因此，如果你逐一点击它们中的每一个，它们都将是真的。我只希望一个人拥有真正的价值。

由于

---编辑2016-03-31 ---
我一直在寻找一个解决方案，而没有编写自定义功能，但事实证明这是无法做到的。我已经将@Ankit Pundhir的答案标记为最佳答案，但这并不是我所追求的目标。

Answer 1

将方法添加到控制器文件：

$scope.selectFood = function(selectedFood){
    angular.forEach($scope.foodList,function(food){
        if(food != selectedFood){
            food.selected = false;
        }
    })
};

并将ng-change="selectFood(food)"添加到单选按钮。

Answer 2

最简单的解决方案是在输入上添加ng-change事件，然后编写一个将selectedFood作为参数的函数，并执行以下操作：

通过foodList迭代并将每个值更改为false
切换selectedFood的状态（如果为true，则设置为false，反之亦然）

这样的事情：

private DatePickerDialog showDatePicker() {

    int todaysDate = mCalendar.get(Calendar.DATE);
    datePicker = new DatePickerDialog(ReminderEditActivity.this, new DatePickerDialog.OnDateSetListener() {

        @Override
        public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {

            mCalendar.set(Calendar.YEAR, year);

            mCalendar.set(Calendar.MONTH, monthOfYear);
            mCalendar.set(Calendar.DAY_OF_MONTH, dayOfMonth);
            //view.setMinDate(System.currentTimeMillis() - 1000);
            datePicker.getDatePicker().setMinDate(System.currentTimeMillis() - 1000);
            updateDateButtonText(); 
        }

    }, mCalendar.get(Calendar.YEAR), mCalendar.get(Calendar.MONTH), mCalendar.get(Calendar.DAY_OF_MONTH)); 

    return datePicker; 
}

private TimePickerDialog showTimePicker() {

    TimePickerDialog timePicker = new TimePickerDialog(this, new TimePickerDialog.OnTimeSetListener() {

        @Override
        public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
            mCalendar.set(Calendar.HOUR_OF_DAY, hourOfDay);
            mCalendar.set(Calendar.MINUTE, minute); 
            updateTimeButtonText(); 
        }
    }, mCalendar.get(Calendar.HOUR_OF_DAY), mCalendar.get(Calendar.MINUTE), true); 

    return timePicker; 
}

现在你的html看起来像这样：

$scope.toggleParam = function(selectedFood){
    loopThroughAndSetToFalse();
    findAndSetReverseValue(selectedFood);
}
function loopThroughAndSetToFalse(){
  for(var i=0; i<$scope.foodList.length; i++){
    $scope.foodList[i].selected = false;
  }
}
function findAndSetReverseValue(selectedFood){
  for(var i=0; i<$scope.foodList.length; i++){
    if($scope.foodList[i].name === selectedFood.name){
        $scope.foodList[i].selected = !(selectedFood.selected);
    }
  }
}

通过AngularJS中的单选按钮切换true / false（在ng-repeat内部）

2 个答案: