Can't get list editing to work

ionic-v1
1

I started with Ionic’s starter app: ionic start myApp tabs

And I want to enhance the list with the delete and reorder functionality shown here:
http://ionicframework.com/docs/api/directive/ionList/

I’m having the following problem:

The ion-header-bar is not displaying like the example here: http://codepen.io/ionic/pen/JsHjf

You can see that the minus sign is missing, the color is not showing, the text is not showing and the button doesn’t work.

I’ve toggled back and forth between the two CodePens trying to see if I’m missing something but cannot find the problem.

Thank you for your help.

2

Once, I had to solve a problem that does not appear icon on the header.

<ion-view title="Things">
<ion-header-bar class="bar-positive">
  <div class="bar bar-header">
    <div class="buttons">
      <button class="button button-icon icon ion-ios7-minus-outline"
              ng-click="data.showDelete = !data.showDelete; data.showReorder = false"></button>
      <h1 class="title">Ionic Delete/Option Buttons</h1>
      <button class="button"
              ng-click="data.showDelete = false; data.showReorder = !data.showReorder">
        Reorder
      </button>
    </div>
  </div>
</ion-header-bar>

it’s not work, so need to put ion-header-bar above ion-view

<ion-header-bar class="bar-positive">
  <div class="buttons">
    <button class="button button-icon icon ion-ios7-minus-outline" 
      ng-click="data.showDelete = !data.showDelete; data.showReorder = false"></button>
  <h1 class="title">Ionic Delete/Option Buttons</h1>
  <button class="button"
      ng-click="data.showDelete = false; data.showReorder = !data.showReorder">
        Reorder
      </button>
  </div>
</ion-header-bar>

so, it can work.

here is my codepen, http://codepen.io/WindSekirun/pen/qgAnu

3

hmm… i tried copy to http://codepen.io/ionic/pen/JsHjf and paste to my codepen, http://codepen.io/WindSekirun/pen/qgAnu .

as a result, i can see ion-option-button.

here is your code

  <ion-list
    show-delete="shouldShowDelete"
    show-reorder="shouldShowReorder"
    can-swipe="listCanSwipe">
  <ion-item ng-repeat="thing in things" type="item-text-wrap" href="#/tab/thing/{{thing.id}}">
    {{thing.id + ' - ' + thing.name}}

    <ion-option-button class="button-info"
                       ng-click="edit(thing)">
      Edit
    </ion-option-button>
    <ion-delete-button class="ion-minus-circled"
                       ng-click="things.splice($index, 1)">
    </ion-delete-button>
    <ion-reorder-button class="ion-navicon"
                        on-reorder="reorderThing(thing, $fromIndex, $toIndex)">
    </ion-reorder-button>
  </ion-item>
</ion-list>

and my code.

<ion-list show-delete="data.showDelete" show-reorder="data.showReorder">

    <ion-item  ng-repeat="thing in things" type="item-text-wrap" href="#/tab/thing/{{thing.id}}">
      {{thing.id + ' - ' + thing.name}}
      <ion-delete-button class="ion-minus-circled" 
                         ng-click="onItemDelete(item)">
      </ion-delete-button>
      <ion-option-button class="button-assertive"
                         ng-click="edit(item)">
        Edit
      </ion-option-button>
      <ion-option-button class="button-calm"
                         ng-click="share(item)">
        Share
      </ion-option-button>
      <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
    </ion-item>

  </ion-list>

I think maybe the wrong location, but I don’t know exactly what the problem is.