AngularJS过滤器不适用于我的数据:关联数组
AngularJS filter doesn't work with my data: associative array
我仍然是 AngularJS 的新手,但我正在尝试在我的数据上添加一个过滤器,但我无法弄清楚如何让它工作。我的数据是一个关联数组,当我添加一个普通数组进行测试时,它都可以工作。
我在 html 中调用我的指令:
<dispatch data='listToDispatch' search="searchDispatch"></dispatch>
我的指令:
define(['dashboard/module', 'lodash'], function (module) {
'use strict';
return module.registerDirective('dispatch', function () {
return {
controller: 'DashboardCtrl',
restrict: 'E',
scope: {
data: '=',
search: '='
},
template: '<div class="padding-dispatch" ng-repeat="(name,user) in data | filter:search">' +
'<strong>{{name}}</strong>' +
'{{search}}' +
'<div class="dispatch-charts" chartjsdoughnut="user[0]"></div>' +
'<div class="dispatch-charts" chartjsdoughnut="user[1]"></div>' +
'<div class="dispatch-charts" chartjsdoughnut="user[2]"></div>' +
'<div class="dispatch-charts" chartjsdoughnut="user[3]"></div>' +
'<hr />' +
'</div>'
}
});
传递给指令的我的数据:
$scope.dataPersons =
{
"Sidney":
[
[
{
value: 70,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 36,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
],
[
{
value: 40,
color: "#1675a9",
highlight: "#1675a9",
label: "is unique"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is unique"
}
],
[
{
value: 70,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
],
[
{
value: 70,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
]
],
"Cedric":
[
[
{
value: 70,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
],
[
{
value: 76,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
],
[
{
value: 70,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
],
[
{
value: 70,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
]
]
};
$scope.dataVehicles =
{
"Xavier":
[
[
{
value: 70,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 36,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
],
[
{
value: 40,
color: "#1675a9",
highlight: "#1675a9",
label: "is unique"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is unique"
}
],
[
{
value: 70,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
],
[
{
value: 70,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
]
],
"Tarek":
[
[
{
value: 70,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
],
[
{
value: 76,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
],
[
{
value: 70,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
],
[
{
value: 70,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
]
]
};
在您的指令模板中,删除单词"filter"和它后面的":"。模板应如下所示:
template: '<div class="padding-dispatch" ng-repeat="(name,user) in data | search">' +
'<strong>{{name}}</strong>' +
'{{search}}' +
'<div class="dispatch-charts" chartjsdoughnut="user[0]"></div>' +
'<div class="dispatch-charts" chartjsdoughnut="user[1]"></div>' +
'<div class="dispatch-charts" chartjsdoughnut="user[2]"></div>' +
'<div class="dispatch-charts" chartjsdoughnut="user[3]"></div>' +
'<hr />' +
'</div>'
相关文章:
- 多维关联数组的最后一个索引
- node.js/javascript/couchdb视图到关联数组似乎不起作用
- 具有关联数组数据集的D3.js表
- 后关联数组使用jquery ajax
- 返回一个关联数组,而不是mongoose中的文档数组
- 如何在 Angular JS 中从关联数组创建多个复选框
- 存储在变量中的关联数组中的访问键
- 如何在具有相同 ID 的 Javascript 中按排序函数对关联数组进行排序
- 在主要的JavaScript引擎中,在JavaScript关联数组(动态对象属性)中检索/插入的复杂性是多少
- 关联数组,并使用父数组d作为selection.data()的源数组
- 获取关联数组的标签
- JavaScript:如何在最接近值的关联数组中查找键
- 单击时显示关联数组的元素
- 关联数组 - 使用图像滑块显示键值
- Javascript从关联数组中查找最低数字(气泡排序方法)
- AngularJS过滤器不适用于我的数据:关联数组
- 获取关联数组中当前函数的键
- 如何按一个仍保持字母顺序的特性值(另一个特性值)对关联数组进行排序
- 正在检查JavaScript中是否存在关联数组
- 将数据附加到关联数组或维度数组