Ionic按钮ng-repeat渲染异常：仅显示一个按钮问题排查求助

我之前也遇到过类似的坑，大概率是你直接在ion-button这个自定义指令上使用ng-repeat导致的——Ionic的组件指令和AngularJS的ng-repeat在渲染优先级或者指令解析顺序上会产生冲突，最终只渲染出第一个元素。

给你几个实用的解决方案：

方案1：用容器包裹按钮，将ng-repeat移到容器上 #

把ng-repeat放在父级的普通<div>或者Ionic自带的<ion-buttons>容器上，让循环逻辑先于按钮组件执行，就能正常生成多个按钮了：

<ion-buttons ng-repeat="item in [1, 2, 3, 4]">
  <button ion-button round block>{{item}}</button>
</ion-buttons>

方案2：把数组定义在控制器中（更推荐） #

直接在模板里写数组虽然能运行，但不利于后续维护和逻辑扩展，建议把数量数组放到对应的控制器里：

// 你的控制器代码示例
angular.module('yourApp').controller('YourViewController', function($scope) {
  // 将片段数量选项定义在作用域中
  $scope.fragmentOptions = [1, 2, 3, 4];
});

然后模板里这样调用：

<div ng-repeat="count in fragmentOptions">
  <button ion-button round block>{{count}}</button>
</div>

额外小提示 #

你原来的按钮内容是固定的number!，如果要显示对应的数字选项，记得用AngularJS的插值表达式{{item}}或者{{count}}替换掉固定文本哦。

内容的提问来源于stack exchange，提问作者Danubio