Hide elements on DOM based on $stateParams param on Ionic

Question

I'm building an app with three tabs: Home, Profile and Settings.

In the "Home" tab there is a list of items. When I click on an item, I enter into a "Detail" section of that item where there are some buttons and other controls.

Essentially, the "Profile" tab is exactly the "Detail" section aforementioned but without such controls. So, what I tried to do is to configure the states like the following (I'll show only the relevant ones):

 .state('tab', {
        url: '/tab',
        abstract: true,
        templateUrl: 'templates/tabs.html'
      })

      .state('tab.home', {
        url: '/home',
        views: {
          'tab-home': {
            templateUrl: 'templates/tabs/tab-home.html',
            controller: 'HomeCtrl'
          }
        }
      })

      .state('tab.assetdetail', {
          url: '/asset/:assetId/:readOnly',
          views: {
              'tab-home': {
                  templateUrl: 'templates/tabs/asset-detail.html',
                  controller: 'AssetDetailCtrl'
              }
          }
        })

      .state('tab.profile', {
          url: '/profile/:assetId/:readOnly',
          views: {
            'tab-profile': {
              templateUrl: 'templates/tabs/asset-detail.html',
              controller: 'AssetDetailCtrl'
            }
          }
        })

In the asset-detail.html I put some ng-hide(s) on the elements I want to hide when readOnly flag is set to true. For example:

<div ng-hide="model.readOnly" class="row">
        <div class="col col-10">
            <label class="checkbox">
                <input type="checkbox">
            </label>
        </div>
        <div class="col col-33 col-center">
            <span>{{ 'addToFav' | translate }}</span>
        </div>
        <div class="col col-10">
            <label class="checkbox">
                <input type="checkbox">
            </label>
        </div>
        <div class="col col-33 col-center">
            <span>{{ 'addToContacts' | translate }}</span>
        </div>
    </div>

The problem is that, either I call that page with readOnly=true or readOnly=false, it hides all the components. In my AssetDetailCtrl I have:

$scope.assetId = $stateParams.assetId;
    $scope.model = {
        assetDetail: '',
        lyncAvailable: true,
        readOnly: $stateParams.readOnly
}

And I can see that readOnly has the correct value every time I call the page with different $stateParams, but it has no effect on the DOM.

What can I do?

Thanks

Answer 1

$stateParams params are always strings. "true" == true, but also "false" == true. You need to coerce the value to boolean somehow.

1. in controller: readOnly: !!$stateParams.readOnly,
2. or in view ng-hide="model.readOnly === 'true'" - note quotes around 'true'