2016-08-19 2 views
0

У меня есть следующий сценарий:Доступ нг-модель в различном ионно-контенте

Я хотел бы, чтобы отфильтровать список, и этот список находится в другом ионном содержании, потому что я хочу, панель поиска будет исправлена.

Теперь ng.model с входа не доступен в другом ионном содержимом. Что я могу сделать?

Это мой код:

<ion-view> 
<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"> 
    </label> 
</ion-content> 
    <ion-content class="has-header"> 
    <div class="card-elem animated zoomIn" ng-repeat="cat in myData | filter:searchBox track by cat.storeName"> 
     <h1>{{cat.storeName}}</h1> 
     <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> 
     <br> 
     <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> 
     </div> 
</ion-content> 
<a href="#home"><div class="bar bar-footer bar-balanced"> 
    <div class="title">Zurück</div> 
</div></a> 
</ion-view> 

ответ

1

просто инициализировать этот $scope.searchBox = { storeName: '' }; или $scope.searchBox = { }; в контроллере

рабочий пример

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, 
 
.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-header-bar> 
 
     <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"> 
 
     </label> 
 
     </ion-content> 
 
     <ion-content class="has-header has-subheader"> 
 
     <ion-list> 
 
      <ion-item ng-repeat="stooge in stooges | filter:searchBox track by stooge.name" href="#">{{stooge.name}}</ion-item> 
 
     </ion-list> 
 
     </ion-content> 
 
    </ion-view> 
 

 
    </div> 
 
</div>