javascript - 访问不同 ion-content 的 ng-model

Question

我有以下场景:

我想过滤一个列表，这个列表是不同的 ionic 内容，因为我想修复搜索栏。

现在，输入中的 ng.model 在其他 ion-content 中不可访问。我能做些什么？

这是我的代码:

<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>

Answer 1

只需在您的 Controller 中初始化此 $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>