Ion-checkbox wrongly showing selected

ionic-v1
1

Hello Everyone -

I have spent much time on the following issue with no luck, any help will be greatly appreciate -

In my app, I am trying to allow users select multiple image items and then delete all the selected items on the click of a button.
The problem I am facing is this -

When I select items and click on the delete button, it works fine and removes the selected items from the list/display, however, the next item in the list, the checkbox automatically shows pre-selected somehow. In reality the checkbox is not selected, because if I try to delete that item, it does not actually deletes it, but somehow the checkbox wrongly shows as selected on the UI.

Below is my sample code with the issue recreated -
steps to reproduce the issue -

  1. Select the first item checkbox.
  2. Click on the delete button.
  3. The result will be that the selected item is deleted correctly, however, the next item in the list will show checkbox as selected automatically, and that is the problem.

Code -
HTML -

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="starter">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view>
<ion-view view-title="Example" ng-controller="MyCtrl" align="center" ng-init="init()">
<ion-header-bar class="bar bar-subheader" style="background-color: #BDBDBD">
              <h4>HeaderName</h4>
          </ion-header-bar>

          <ion-content overflow-scroll="false" has-header="true" has-subheader="true" style="height: 80%">

                <ion-list>
                      <ion-item class="col col-50" collection-repeat="item in imageUrls" collection-item-width="'50%'" collection-item-height="'50%'">
                          <img ng-src="{{item.uri}}" height="45%" on-hold="onImageHold(item,$index)">
                                  <ion-checkbox name="itemSelected" ng-change="checkSelect($index)" ng-model="checkBoxItem.checked">Check</ion-checkbox>            
                        </ion-item>
                </ion-list>
      
          </ion-content>  

          <ion-footer-bar class="bar button-bar-footer" style="height: 10%">
              <div class="button-bar">
                <button type="button" class="button button-outline icon-right" ng-click="delete()">Delete Selected</button>
              </div>
            </ion-footer-bar>
            </ion-view>
    </ion-nav-view>
  </body>
</html>

Controllers.js Code -

angular.module('starter.controllers', [])

.controller('MyCtrl', function($scope) {

$scope.imageUrls = [];
	$scope.imageUrls.push({
            uri: "https://c2.staticflickr.com/4/3850/14571947373_08fc9a23f1.jpg",
            desc: "First",
            price: "",
            isClicked: false
        });

$scope.imageUrls.push({
            uri: "https://c1.staticflickr.com/3/2910/14551385111_4532d6380c_z.jpg",
            desc: "Second",
            price: "",
            isClicked: false
        });

$scope.imageUrls.push({
            uri: "https://c2.staticflickr.com/4/3924/14551004032_18341a87ab_z.jpg",
            desc: "Third",
            price: "",
            isClicked: false
        });
$scope.imageUrls.push({
            uri: "http://farm4.static.flickr.com/3221/2658147888_826edc8465.jpg",
            desc: "Third",
            price: "",
            isClicked: false
        });

$scope.checkSelect = function(index)
{

  console.log('array index is '+index);
  
      var currentItem = $scope.imageUrls[index];
      if(currentItem.isClicked)
        currentItem.isClicked = false;
      else
        currentItem.isClicked = true;
}


$scope.delete = function()
{
for(var i=0;i<$scope.imageUrls.length;i++)
              {
                var item = $scope.imageUrls[i];
                var elementChecked = item.isClicked;
                console.log('elementChecked is - '+elementChecked+ ' at index '+i);
                if(elementChecked)
                   $scope.imageUrls.splice(i,1);
              }
}
})

App.js code -

angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})
2

So this seems to be an issue with collection repeat.
Switching to ng-repeat seems to resolve the issue.

Would mind posting a issue for this on github and provide a codepen example

3

Thanks for looking into it.

Created the issue on github here -

here is the pen - http://codepen.io/anon/pen/yywwxN

Thanks,
Nitin.