Ionic navbar search

Html:

<search-bar ng-model="search"></search-bar>

app.js:

.directive('searchBar', [function () {
  return {
    scope: {
      ngModel: '='
    },
    require: ['^ionNavBar', '?ngModel'],
    restrict: 'E',
    replace: true,
    template: '<ion-nav-buttons side="right">'+
            '<div class="searchBar">'+
              '<div class="searchTxt" ng-show="ngModel.show">'+
                  '<div class="bgdiv"></div>'+
                  '<div class="bgtxt">'+
                    '<input type="text" placeholder="Search..." ng-model="productObject.searchAgenda">'+
                  '</div>'+
                '</div>'+
                '<i class="button button-clear" ng-class="{\'icon-disabled-opacity\' : showdate}" ng-click="updateSelection();" title="Show all dates">All</i>'+
            '</div>'+
          '</ion-nav-buttons>',
   
    compile: function (element, attrs) {
      var icon=attrs.icon
          || (ionic.Platform.isAndroid() && 'ion-android-search')
          || (ionic.Platform.isIOS()     && 'ion-ios7-search')
          || 'ion-search';
      angular.element(element[0].querySelector('.icon')).addClass(icon);
     
      return function($scope, $element, $attrs, ctrls) {
        var navBarCtrl = ctrls[0];
        $scope.navElement = $attrs.side === 'right' ? navBarCtrl.rightButtonsElement : navBarCtrl.leftButtonsElement;
       
      };
    }
   
  };
}])

yourCTRL.js:

app.controller('searchBarCtrl', function($scope,$ionicNavBarDelegate){
  var title, definedClass;
  $scope.$watch('ngModel.show', function(showing, oldVal, scope) {
    if(showing!==oldVal) {
      if(showing) {
        if(!definedClass) {
          var numicons=$scope.navElement.children().length;
          angular.element($scope.navElement[0].querySelector('.searchBar')).addClass('numicons'+numicons);
        }
       
        title = $ionicNavBarDelegate.getTitle();
        $ionicNavBarDelegate.setTitle('');
      } else {
        $ionicNavBarDelegate.setTitle(title);
      }
    } else if (!title) {
      title = $ionicNavBarDelegate.getTitle();
    }
  });
});


1 comment:

  1. Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing.Nice article i was really impressed by seeing this article, it was very interesting and it is very useful for me.
    Angularjs Training In Hyderabad

    ReplyDelete