有条件地检查收音机的角度答案

【问题标题】：Conditionally check radio in angular有条件地检查收音机的角度
【发布时间】：2013-09-09 21:55:00
【问题描述】：

我有一个单选组、一个按钮和一个布尔值。单击按钮时，如果布尔值为 true，则选中一个单选按钮，如果为 false，则选中另一个。不知道如何为类似的东西设置绑定。

编辑

事实证明情况有点复杂。

流程是这样的：

提供 2 个按钮，一个是立即购买，一个是分期购买
提供追加销售
1. 如果您点击立即购买，请将“插件”sku 添加到订单商品哈希中
2. 如果您点击了“分期付款”，请将“addon_plan”sku 添加到项目哈希中

所以哈希的不同状态如下所示：

//base offer only
order.items = {base_offer: 1}

//base offer with payment plan
order.items = {base_offer_plan: 1}

//accessory kit only if base_offer_plan was not selected
order.items = {accessory_kit: 1}

//accessory kit with plan if user first chose base_offer_plan
order.items = {accessory_kit_plan: 1}

【问题讨论】：

你在编辑中迷失了我。不太确定哈希应该是什么样子。您能举一个具有各种属性和不同阶段的哈希示例吗？
我会更新的，是的

标签： button angularjs binding radio-button

【解决方案1】：

使用ng-value 并将模型的值设置为该值将检查无线电。

ng-value="true" 会将其设置为 true 其中 value="true" 将是字符串 'true' 和 true != 'true' 复选框返回 true/false 布尔值，而不是字符串。

http://jsfiddle.net/TheSharpieOne/d7yWb/

HTML

<input type="radio" name="boolRadio" ng-model="checkboxValue" ng-value="true" />
<input type="radio" name="boolRadio" ng-model="checkboxValue" ng-value="false" />
<input type="submit" ng-click="updateValue()" />
<input type="checkbox" name="bool" ng-model="checkbox" />

控制器：

function myCtrl($scope) {
    $scope.checkbox = false;
    $scope.updateValue = function(){
        $scope.checkboxValue = $scope.checkbox;
    }
}

我们将默认复选框设置为 false，因为它是未定义的，并且单击提交不会在开始时正确设置收音机。

只要他们通过删除 updateValue 函数并将收音机的模型直接设置为复选框来选中该框，您就可以立即实现。

【讨论】：

【解决方案2】：

这是我如何处理类似情况的示例...注意 ng-class 在指令中使用，您可能想要使用 ng-checked 但做类似的事情...在我的情况下，我最终得到两个用作是否问题的切换按钮：

directive('buttonsRadio', [function()
{
    return {
        restrict: 'E',
        scope: {model: '=', options: '='},
        controller: function($scope)
        {
            $scope.activate = function(option) {
                $scope.model = option;
            }
        },
        template: "<div class='btn-group' data-toggle='buttons-radio'><div ng-repeat='option in options track by option.optionId'><button type='button' class='btn' ng-class='{active: option.optionId==model.optionId}' ng-click='activate(option)'>{{option.name}}</button><br></div></div>"
    }
}])

请注意，我没有在此处正确设置 ng-model，因此它会更新到外部并适用于我的目的，但可能不正确。有专门关于与我在其他地方使用过的 ng-model 集成的文档，例如：

   // view -> model
   // bit of jQuery in this case to handle async geocoding results
   $(iElement).geocomplete().bind("geocode:result", function(event, result){
       ctrl.$setViewValue(result.formatted_address);
       console.log(result.formatted_address);
       scope.$emit("geocodeResultComplete", result); //use this event to update a google map
    });

    // model -> view
    ctrl.$render = function() {
       iElement.val(ctrl.$viewValue);
    };

    // load init value from DOM
    //ctrl.$setViewValue(iElement.val());

【讨论】：