Question

我有html

<body ng-controller="AppCtrl">
  <ion-side-menus>
    <ion-side-menu-content>
      <ion-nav-bar class="nav-title-slide-ios7 bar-positive">
        <ion-nav-back-button class="button-icon ion-arrow-left-c">
        </ion-nav-back-button>
      </ion-nav-bar>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
        </button>
      </ion-nav-buttons>

      <ion-nav-view animation="slide-left-right" name="main-view">
      </ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="left">
      <div class="list">
        <a menu-close href="#" class="item item-icon-left">
          <i class="icon ion-home">
          </i>
          Home
        </a>
        <a menu-close href="#/product" class="item item-icon-left">
          <i class="icon ion-home">
          </i>
          products
        </a>
        <a menu-close href="#/category" class="item item-icon-left">
          <i class="icon ion-home">
          </i>
          Category
        </a>

      </div>

    </ion-side-menu>
  </ion-side-menus>
  <script id="product.html" type="text/ng-template">
    <ion-view title="products">
      <ion-content>
      <div class="list">
        <a class="item" href="#/product-form?id={{item.id}}" ng-repeat="item in items | filter:{nome: searchText}">
          {
            {item.nome}
    }
      <span class="item-note">
        {
          {item.quantidade}
    }
  </span>
  </a>
  </div>    
  </ion-content>
    <div class="tabs tabs-icon-top">
      <a class="tab-item" href="#/product-form">
        <i class="icon ion-home"></i>
          Adicionar
  </a>
            <a class="tab-item" ng-click="openModal()">
              <i class="icon ion-search"></i>
                Filtrar
  </a>
  </div>     
  </ion-view>
  </div>
  </script>

  <script id="search.html" type="text/ng-template">
    <div class="bar bar-header item-input-inset">
      <label class="item-input-wrapper">
        <i class="icon ion-ios7-search placeholder-icon"></i>
          <input type="search" placeholder="busca" ng-model="searchText">
  </label>
            <button class="button button-clear" ng-click="closeModal()">
              cancelar
  </button>
  </div>
  </script>
</body>

使用此controller

angular.module('ionicApp.controllers', ['ionicApp.config', 'xc.indexedDB'])
    .controller('ProductController',
        function ($scope, $ionicPopup, $timeout,
            $ionicModal, $indexedDB, $window, $ionicModal) {
            $scope.safeApply = function (fn) {
                var phase = this.$root.$$phase;
                if (phase == '$apply' || phase == '$digest') {
                    if (fn && (typeof (fn) === 'function')) {
                        fn();
                    }
                } else {
                    this.$apply(fn);
                }
            };

            var OBJECT_STORE_NAME = constants.productStore;
            $scope.items = [];
            $scope.searchText = "";

            $scope.getAll = function () {

                var myObjectStore = $indexedDB.objectStore(OBJECT_STORE_NAME);

                myObjectStore.getAll().then(function (results) {
                    // Update scope
                    $scope.safeApply(function () {
                        $scope.items = results;
                    });
                });
            };

            $scope.getAll();

            $ionicModal.fromTemplateUrl('search.html', {
                scope: $scope,
                animation: 'slide-left-right'
            }).then(function (modal) {
                $scope.modal = modal;
            });

            $scope.closeModal = function () {
                alert($scope.searchText);
                $scope.modal.hide();
            };

            $scope.openModal = function () {
                //$scope.searchText = "a";
                $scope.getAll();
                $scope.modal.show();
            };

            $scope.closeModal = function () {
                alert($scope.searchText);
                $scope.modal.hide();
            };
            //Cleanup the modal when we're done with it!
            $scope.$on('$destroy', function () {
                $scope.modal.remove();
            });
            // Execute action on hide modal
            $scope.$on('modal.hidden', function () {
                // Execute action
            });
            // Execute action on remove modal
            $scope.$on('modal.removed', function () {
                // Execute action
            });

        })

修改

这是我定义ProductController

的地方

var app = angular.module('ionicApp', ['ionic', 'ionicApp.controllers']);

app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('index', {
            url: "/",
            views: {
                'main-view': {
                    templateUrl: "home.html",
                    controller: "AppCtrl"
                }
            }
        })
        .state('product', {
            url: "/product",
            views: {
                'main-view': {
                    templateUrl: "product.html",
                    controller: 'ProductController'
                }
            }
        });

    $urlRouterProvider.otherwise("/");
});

我的问题是searchText模型在值更改时没有更新。我尝试了$watch，ng-options。

我可以在$scope.searchText方法的openModal上添加初始值，但在输入值后不要更新模型值，因此我的列表不会被过滤。

有人可以帮助我吗？

感谢。

修改2

我解决了将搜索文本添加到模态中的问题。

    $scope.modal = modal;
    $scope.modal.searchText = "";

我将属性更改为新变量。

<input type="search" placeholder="busca" ng-model="modal.searchText">

感谢您的支持。

Answer 1

双向绑定最适合嵌套对象。更改绑定以使用类似

的内容

$scope.data = {};
$scope.data.items = [];

Answer 2

在模态在范围内之前，仍然会请求模态的模板。这可能是原因

ng-model在模态中没有双向绑定

2 个答案: