如何在 html 中查看过滤器

Question

在我的主页上，我添加了一个名为 'city' 的按钮。单击它会打开一个列出城市名称的弹出窗口。单击城市 'paris' 时，必须显示带有城市名称的数据。

首页

 <ion-header-bar class="bar bar-subheader">   
            <button class="button button-flat button-positive"ng-click="citypopup();" style="padding-right: 63px;
    padding-left: 18px;"> 
                <l >City </l>
                <l class="icon ion-chevron-down"></l>
            </button>

    </ion-header-bar> 

    <ion-content> 
          <div class='card ' ng-repeat="item in list  | filter:test.searchCity ">
                 <div class="list "  >
                    <div class='item' style="padding-top:0px;" >  {{item.id}}
                        <l class="item-icon-right" style="padding-left:30%"> {{item.date}} </l>
                    </div>

                    <div class='item' style="padding-top:0px;" >{{item.status }}
                        <l class="item-icon-right" style="text-align:right;">{{item.QCstatus}}</l>
                        <i class="icon ion-chevron-right"></i>
                    </div>
                    <b class='item '> {{item.Factory}} </b>
                    <l class='item '>{{item.city }}</l>
                </div>

弹出页面

<ion-list> 
    <ul class="list" ng-model="test.searchCity" ng-repeat="ci in cityList | orderBy:'city' " >
        <li class="item" ng-click="test.searchCity">{{ci.city}}  </li>      
    </ul>
</ion-list>

javascript

$scope.test = {
    searchCity: null,       
};

$scope.cityList = [
    {
        "city": "Chennai"
    }, {
        "city": "Banglore"
    }, {
        "city": "Delhi"
    }
];

$scope.list = [
    {  
        id: "#001",
        date:"DEC 04 2016",
        status: "Successful",
        QCstatus: "Approve",
        Factory: "ARUN ICE CREAM",
        city: "paris"
    },
    {
        id: "#002",
        date: "JAN 11 2016",
        status: "Successful",
        QCstatus: "Approve",
        Factory: "Floxtronics",
        city: "Delhi"
    },
    {
        id: "#003",
        date: "Feb 14 2016",
        status: "Bug fixing",
        QCstatus: "Approve",
        Factory: "Aachi",
        city: "Chennai"
    }           
];

$scope.$watch('test.searchCity', function () {
    $scope.test.searchCity = null;
    console.log('test.searchCity')
});

$scope.citypopup = function() {
    var myPopup = $ionicPopup.show({
        scope: $scope,
        templateUrl: 'templates/cityTemplate.html',    
        buttons: [
            { text: 'Cancel',
             type: 'button-positive' },            
        ]
    });

}

我需要的是当我点击 'city' 按钮时，我的城市弹出窗口出现，当我点击一个城市时没有任何反应！有人可以帮助我吗？

Answer 1

您从未分配 test.searchCity。

在您使用 ng-click="test.searchCity" 的弹出页面代码中，您可能应该使用 ng-click="test.searchCity = ci.city"。

与您的问题无关（但与正确使用模式有关）：ul 元素中不需要 ngModel（它仅适用于表单元素），并且 ng-repeat在 lis 而不是 uls.

上使用时更有意义

结论：

<ion-list> 
    <ul class="list">
        <li class="item" ng-repeat="ci in cityList | orderBy:'city' " ng-click="test.searchCity = ci.city">{{ci.city}}  </li>      
    </ul>
</ion-list>

Answer 2

无需另建弹窗，可在citypopup() function

中打开弹窗内容

$scope.citypopup = function() {
  $scope.popup = $ionicPopup.show({         
      template:"<ion-list><ul class='list' ng-model='test.searchCity' ng-repeat='ci in cityList | orderBy:city ' ><li class='item' ng-click='searchCity(ci.city)'>{{ci.city}}  </li> </ul></ion-list>" ,
      title: 'City',
      scope: $scope        
  });
}

$scope.searchCity = function(city){
   $scope.test.searchCity = city;    
   $scope.popup.close();
}

如何在 html 中查看过滤器

How to make filter to be viewed in html

angularjs

cordova

ionic