我有一个包含许多对象(JSON格式)的数据数组.以下可以假设为此数组的内容:
var data = [
{
"name": "Jim",
"age" : 25
},
{
"name": "Jerry",
"age": 27
}
];
现在,我将这些细节显示为:
<div ng-repeat="person in data | filter: query">
</div
这里,查询被建模为输入字段,其中用户可以限制所显示的数据.
现在,我有另一个位置,我在其中显示当前显示的人/人数,即 Showing {{data.length}} Persons
我想要做的是,当用户搜索某个人并根据查询过滤显示的数据时,Showing...persons还会更改当前显示的人的值.但它没有发生.它始终显示数据中的总人数而不是过滤数据 - 如何获取过滤数据的计数？
我有一个表,用户可以选择根据某些列和这些列的某些值来过滤表中的行.跟踪此过滤器的对象结构如下所示:
$scope.activeFilterAttributes = [
{
"columnName": "city",
"values": ["LA", "OT", "NY"]
},
{
"columnName": "weather",
"values": ["humid", "sunny"]
}
];
因此,数组中的对象包含"columnName"和"values"键."columnName"表示要为过滤器考虑的列,而"values"包含过滤器值.基本上,上面的数组将导致表中的行,其中city列包含"LA","OT"或"NY"作为值,而weather列包含"湿"或"晴天"作为值.不显示不包含这些值的其他行.
为了更好地理解这个对象,如果用户只希望在"city"列中看到那些"LA"或"NY"的行,则结果数组将如下所示:
$scope.activeFilterAttributes = [
{
"columnName": "city",
"values": ["LA", "NY"]
},
{
"columnName": "weather",
"values": []
}
];
用户设置或删除这些过滤器.只要发生这种情况,就会更新上面的数组.此更新正确发生,我已经验证了 - 这里没问题.
问题出在$ watch()上.我有以下代码:
$scope.$watch('activeFilterAttributes', function() {
//Code that should update the rows displayed in the table based on the filter
}}
当$scope.activeFilterAttributes用户在UI中更新过滤器时,会正确更新,但在更新时不会触发$ watch.它是在应用程序加载时第一次触发但未来的更新对此没有影响.
我创造了一个小提琴来证明这一点:http://jsfiddle.net/nCHQV/
在小提琴中,$scope.info代表桌子的行,可以这么说;
$scope.data代表过滤器.
单击该按钮相当于更新过滤器(在小提琴的情况下 - 数据),从而更新表格中显示的行(在小提琴的情况下 - 信息).但是可以看出,单击按钮时信息不会更新. …
当我的页面加载时,我icon-refresh + icon-spin通过将其display属性设置为none来隐藏图标.
现在,在执行某些操作后,我希望显示此图标.我.show()在图标上调用了jQuery的方法.但是,显示图标时,图标不再旋转.
如果我加载它而不是最初隐藏它,它会旋转.但不是在以后隐藏和显示的时候.
编辑:如果从标题中不清楚,我使用Font Awesome来显示图标
我正在尝试使用https://developers.facebook.com/docs/reference/plugins/login/上的文档将Facebook登录按钮添加到我的网站
现在,此按钮显示在视图中.仅当用户明确请求登录网站时才加载视图.
我使用的是HTML5版本.在第1步中,我被要求包含Javascript SDK - 我在标记之后立即执行此操作.它位于包含该ng-view指令的主页面中.
我将代码放置在视图中呈现登录按钮.问题是,如果我通过单击主页面中的登录按钮导航到视图,则视图不会呈现FB登录按钮.但是,如果我刷新页面(包含登录视图的页面),则按钮呈现.
我已经将Javascript SDK的代码移动到了登录视图中 - 无论是在呈现按钮之前还是之后,这也无法解决问题.仅在刷新登录视图时,才会呈现该按钮.
所以,
a)要么我需要知道为什么会发生这种情况和解决方案,要么
b)在AngularJS中刷新; 这就是我需要知道AngularJS在渲染之前刷新登录视图的方式,以便(我希望)登录按钮被渲染.
model.data 包含以下内容:
{
"name": "Jamie",
"age": 25
}
我的指令看起来像:
<my-directive data="model.data"></my-directive>
我已将该指令定义如下:
app.directive('myDirective', function(){
return {
restrict: 'E',
scope: {
data: '='
},
templateUrl: 'grid.html',
controller: function($scope) {
console.log($scope);
console.log($scope.data);
}
}
}
问题是console.log($scope)返回$ scope中的值.我可以看到它包含数据:
{
$$asyncQueue: Array[0],
$$childHead: null,
...
...
data: Array[1]
}
但是,console.log($scope.data)退货undefined.有什么线索的原因？
我在Express.js中设置一个变量,如下所示:app.set('HOST', 'demo.sample.com');.但是,如果我尝试读取此变量,我会得到undefined输出.我正在阅读变量process.env.HOST.然而,如果我尝试使用它app.get('HOST'),我会得到正确的值.
我无法使用,app.get('HOST')因为我正在读取另一个文件中的变量 - 一个不包含对Express.js app变量的引用的文件.
如何使用该值process.env.HOST？
编辑:我已经设法让我的单元测试运行 - 我将包含服务的代码移动到另一个文件和一个不同的模块,使这个新模块成为fooBar模块的要求,然后在调用每个"it"块之前,引入代码beforeEach(module(<new_service_module_name)).但是,我的应用程序仍然无法运行.控制台也没有错误.这是唯一仍然存在的问题 - 当我使用全局范围进行控制器定义时,应用程序可以工作,但是当我使用angular.module.controller时 - 它没有.
我有一个app.js包含以下内容的文件:
'use strict';
var app = angular.module('fooBar', []);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/form-view.html',
controller: FormViewCtrl
}).
when('/resultDisplay', {
templateUrl: 'partials/table-view.html',
controller: TableViewCtrl
}).
otherwise({redirectTo: '/'});
}]);
app.service('searchResults', function() {
var results = {};
return {
getResults: function() {
return results;
},
setResults: function(resultData) {
results = resultData;
}
};
});
我有另一个controllers.js包含以下内容的文件:
'use strict';
var app = angular.module('fooBar', []);
app.controller('FormViewCtrl', ['$scope', '$location', '$http', 'searchResults',
function …