0

我正在尝试使用 OnsenUI 制作一些切换按钮。我只想用 ons-button 属性按钮 type=""（正常）或 type="quiet" 来表示切换状态。

逻辑似乎很简单，一个 plunkr 在这里：http ://plnkr.co/edit/25Y9KSfSv2Ket5gHzcjI?p=preview ，下面是 html：

<ons-button 
    type="{{buttonType()}}"
    ng-click="!bool"
    >
    button type {{buttonType()}}
</ons-button>

和控制器：

app.controller('MyController', function($scope) {

  $scope.bool = false;

  $scope.buttonType = function() {
    if ($scope.bool) {
      return ''; //normal button
    } else {
      return 'quiet';  //quiet button
    }
  }    

});

我试过用 ng-class 切换，但是，同样的问题；该按钮在页面上最初呈现后不会更新（并且显然没有通过任何摘要更新进行更新）。

当然，我最初使用复选框尝试过这个，但是我无法逃脱移动设备上 300 毫秒的点击延迟。（我知道 OnsenUI 使用 Fastclick，但它似乎在 Android 上根本没有做任何事情，而且在 iOS 上的复选框仍然很慢，所以我正在尝试切换按钮，如果它可以工作，实际上可能更喜欢这种方法。）

难道我做错了什么？

谢谢阅读。

4

2 回答 2

1

看起来你实际上并没有改变$scope.boolon that的值ng-click。你应该这样做ng-click="bool = !bool"。Plunker：http ://plnkr.co/edit/08sgrG57yym82l6WSDrO?p=preview

于 2014-07-11T13:01:35.147 回答
0

显然，这超出了自定义按钮指令的功能。

我使用了一个带有 2 个 css 类的标准 html 按钮；类似于 topcoat-button 和 topcoat-button--quiet，并使用 ng-class 在它们之间切换。

于 2014-07-11T15:01:26.577 回答