olivier olivier - 1 year ago 117
AngularJS Question

Access ng-model in different ion-content

I have the following scenario:

I would like to filter a list and this list is in a different ion-content because i want the search bar to be fixed.

Now the ng.model from the input isn't accessable in the other ion-content. What can I do?

This is my code:

<ion-content class="no-bgColor" scroll="false" padding="false">
<label class="item item-input">
<span class="input-label">Suche</span>
<input type="text" ng-model="searchBox.storeName">
<ion-content class="has-header">
<div class="card-elem animated zoomIn" ng-repeat="cat in myData | filter:searchBox track by cat.storeName">
<p ng-if="d == 1">Heute: {{cat.openingHours[0]}}</p>
<p ng-if="d == 2">Heute: {{cat.openingHours[1]}}</p>
<p ng-if="d == 3">Heute: {{cat.openingHours[2]}}</p>
<p ng-if="d == 4">Heute: {{cat.openingHours[3]}}</p>
<p ng-if="d == 5">Heute: {{cat.openingHours[4]}}</p>
<p ng-if="d == 6">Heute: {{cat.openingHours[5]}}</p>
<p ng-if="d == 0">Heute: {{cat.openingHours[6]}}</p>
<h2 ng-click="showAlert(cat.openingHours[0],cat.openingHours[1],cat.openingHours[2],cat.openingHours[3],cat.openingHours[4],cat.openingHours[5],cat.openingHours[6])">Alle Öffnungszeiten</h2>
<a href="#home"><div class="bar bar-footer bar-balanced">
<div class="title">Zurück</div>

Answer Source

just initialize this $scope.searchBox = { storeName: '' }; or $scope.searchBox = { }; in your controller

working example

angular.module('ionicApp', ['ionic'])
  .controller('AppCtrl', function($scope, $timeout, $ionicLoading) {

    //initialize with a empty value
    $scope.searchBox = { };

    $scope.stooges = [{
      name: 'Moe'
    }, {
      name: 'Larry'
    }, {
      name: 'Curly'

.bg-smoke label {
  background-color: #fafafa;
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<div ng-app="ionicApp">
  <div ng-controller="AppCtrl">
    <ion-view title="Home">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Search By Name</h1>
      <ion-content class="bg-smoke" scroll="false" padding="false">
        <label class="item item-input">
          <span class="input-label">Search</span>
          <input type="text" ng-model="searchBox.name">
      <ion-content class="has-header has-subheader">
          <ion-item ng-repeat="stooge in stooges | filter:searchBox track by stooge.name" href="#">{{stooge.name}}</ion-item>


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download