Ren*_*nto 2 javascript angularjs ionic-framework
我有这个 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放在on openModal方法上,但是在输入的值之后不会更新模型值,因此我的列表不会被过滤.
有人可以帮帮我吗？
谢谢.
编辑2
我解决了将搜索文本添加到模态中的问题.
$scope.modal = modal;
$scope.modal.searchText = "";
我将属性更改为新变量.
<input type="search" placeholder="busca" ng-model="modal.searchText">
感谢您的支持.
Dan*_*ite 13
双向绑定最适合嵌套对象.更改绑定以使用类似的东西
$scope.data = {};
$scope.data.items = [];