bootstrap navbar 在其他 jade 文件中搜索
bootstrap navbar search in other jade file
在我的 Angular JS 应用程序中,在视图文件夹中,在 layout.jade 文件中,我使用来自“http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-navbar.php”的 bootstrap "nav.navbar.navbar-inverse" 我做了一个在以下行中更改。
input.form-控制(类型='text',占位符='Search')
到
input.form-控制(类型='text',占位符='Search' ng-模型='searchText')
然后,我用另外一个jade文件vieworder.jade,这里是内容
extends layout
block content
table.table.table-striped(ng-app="vieworder", ng-controller="viewordercontroller" border='1', cellpadding='7', cellspacing='7')
thead
tr
th(width="10%") Customer Name
th(width="10%") Order Type
th(width="10%") Orders
th(width="10%") Order Date
th(width="10%") Order Status
td(width="10%")
tbody
tr(ng-repeat='Order in Orders | filter:layout.searchText')
td {{ Order.custname }}
td {{ Order.ordertype }}
td {{ Order.noorder }}
td {{ Order.orderdate }}
td {{ Order.orderdate }}
td
a.btn.btn-small.btn-primary(ng-click='cancelOrder(Order.id)') cancel
现在,当我 运行 时,我在查看订单页面中获得了所有订单列表,它运行良好。现在我想对 table 内容应用过滤器。为此,我使用 'searchText' ng-model。但是当我在搜索字段中键入任何字母时,过滤器不起作用。请帮帮我..
这是控制器代码
var order = angular.module('vieworder', []);
order.controller('viewordercontroller', function ($scope, $http, $window){
$http.get('/viewalloders').
success(function (data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
$scope.Orders = data;
console.log(data);
}).
error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
console.log("error");
});
console.log("santanu");
$scope.cancelOrder = function (id) {
var path = '/deleteorder/' + id;
var input = [];
input.id = id;
$http.put(path, input).success(function (response) {
console.log("success"); // Getting Success Response in Callback
}).
error(function (response) {
console.log("Santanu :error"); // Getting Error Response in Callback
});
}
});
如果您对两个视图使用相同的控制器,则不需要使用 layout.searchText。简单地说,使用 searchText 因为 $scope 在整个控制器之间共享。可以直接访问。
如果您为两个视图使用不同的控制器,则两个视图的 $scope 是不同的。在这种情况下,您可以像这样定义 searchText:
在您的导航栏控制器中:
$scope.object = {};
$scope.object.SearchText = "someVal";
然后在您的 viewOrderController 中将其用作 "Order in Orders | filter:'object.searchText'"。
如果这不起作用请告诉我
谢谢
在我的 Angular JS 应用程序中,在视图文件夹中,在 layout.jade 文件中,我使用来自“http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-navbar.php”的 bootstrap "nav.navbar.navbar-inverse" 我做了一个在以下行中更改。 input.form-控制(类型='text',占位符='Search') 到 input.form-控制(类型='text',占位符='Search' ng-模型='searchText') 然后,我用另外一个jade文件vieworder.jade,这里是内容
extends layout
block content
table.table.table-striped(ng-app="vieworder", ng-controller="viewordercontroller" border='1', cellpadding='7', cellspacing='7')
thead
tr
th(width="10%") Customer Name
th(width="10%") Order Type
th(width="10%") Orders
th(width="10%") Order Date
th(width="10%") Order Status
td(width="10%")
tbody
tr(ng-repeat='Order in Orders | filter:layout.searchText')
td {{ Order.custname }}
td {{ Order.ordertype }}
td {{ Order.noorder }}
td {{ Order.orderdate }}
td {{ Order.orderdate }}
td
a.btn.btn-small.btn-primary(ng-click='cancelOrder(Order.id)') cancel
现在,当我 运行 时,我在查看订单页面中获得了所有订单列表,它运行良好。现在我想对 table 内容应用过滤器。为此,我使用 'searchText' ng-model。但是当我在搜索字段中键入任何字母时,过滤器不起作用。请帮帮我..
这是控制器代码
var order = angular.module('vieworder', []);
order.controller('viewordercontroller', function ($scope, $http, $window){
$http.get('/viewalloders').
success(function (data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
$scope.Orders = data;
console.log(data);
}).
error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
console.log("error");
});
console.log("santanu");
$scope.cancelOrder = function (id) {
var path = '/deleteorder/' + id;
var input = [];
input.id = id;
$http.put(path, input).success(function (response) {
console.log("success"); // Getting Success Response in Callback
}).
error(function (response) {
console.log("Santanu :error"); // Getting Error Response in Callback
});
}
});
如果您对两个视图使用相同的控制器,则不需要使用 layout.searchText。简单地说,使用 searchText 因为 $scope 在整个控制器之间共享。可以直接访问。
如果您为两个视图使用不同的控制器,则两个视图的 $scope 是不同的。在这种情况下,您可以像这样定义 searchText:
在您的导航栏控制器中:
$scope.object = {};
$scope.object.SearchText = "someVal";
然后在您的 viewOrderController 中将其用作 "Order in Orders | filter:'object.searchText'"。
如果这不起作用请告诉我
谢谢