Question

我正在尝试使用OnsenUI制作一些切换按钮。我只想让切换状态由ons-button属性按钮类型=＆＃34;＆＃34;表示。（正常）或输入=＆＃34;安静＆＃34;。

这个逻辑看起来很简单，一个傻瓜就在这里：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切换，但同样的问题;该按钮最初在页面上呈现时不会更新（并且显然没有使用任何摘要更新进行更新）。

当然，我最初尝试使用复选框，但是我无法逃脱移动设备上300ms的点击延迟。（我知道OnsenUI使用Fastclick，但它似乎在Android上什么都不做，而且在iOS上复选框仍然很慢，所以我尝试切换按钮，实际上可能更喜欢这种方法，如果它能够工作的话。）

我做错了吗？

感谢阅读。

Answer 1

看起来您实际上并未更改$scope.bool上ng-click的值。你应该做ng-click="bool = !bool"。 Plunker：http://plnkr.co/edit/08sgrG57yym82l6WSDrO?p=preview

Answer 2

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

我使用了一个带有2个css类的标准html按钮;类似于面漆按钮和面漆按钮 - 安静，并使用ng级别在它们之间切换。

使用OnsenUI / AngularJS切换按钮类型属性

2 个答案: