1

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

编辑

事实证明情况有点复杂。

流程是这样的：

  1. 附赠 2 个按钮，一是立即购买，一是分期购买
  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}
4

2 回答 2

0

这是我如何处理类似情况的示例...注意 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());
于 2013-09-05T22:41:03.213 回答
0

使用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 函数并将收音机的模型直接设置为复选框来选中该框，您就可以立即进行此操作。

于 2013-09-05T22:41:05.003 回答