Javascript 角JS中的循环
我是Angular JS的新手，我一直在尝试使用它构建一个演示ASP.NETMVC应用程序。 简单地说，我有一个国家列表，每个国家都有一个由3个相关城市组成的列表Javascript 角JS中的循环,javascript,angularjs,foreach,Javascript,Angularjs,Foreach,我是Angular JS的新手，我一直在尝试使用它构建一个演示ASP.NETMVC应用程序。 简单地说，我有一个国家列表，每个国家都有一个由3个相关城市组成的列表 var myModule = angular .module("myModule", []) .controller("myController", function ($scope) { var countries = [
var myModule = angular
.module("myModule", [])
.controller("myController", function ($scope) {
var countries = [
{
name: "UK",
cities: [
{name: "London"},
{name: "Birmingham" },
{name: "Manchestar" }
],
flag: "/Images/UK.gif",
foundationDate: new Date("May 20,1916"),
likes: 0,
dislikes: 0
},
{
name: "USA",
cities: [
{name: "Los Angeles"},
{name: "Houston"},
{name: "Florida"},
],
flag: "/Images/USA.png",
foundationDate: new Date("August 01,1887"),
likes: 0,
dislikes: 0
},
{
name: "INDIA",
cities: [
{ name: "Hyderabad" },
{ name: "Mumbai" },
{ name: "Kolkata" },
],
flag: "/Images/INDIA.jpg",
foundationDate: new Date("August 15,1947"),
likes: 0,
dislikes: 0
}
];
$scope.search = function (country) {
if ($scope.searchText == undefined) {
return true;
}
angular.forEach(country.cities, function (item) {
if (item.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1)
return true;
});
return false;
}
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myModule">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/MyModuleScript.js"></script>
<style>
table, th, td {
border-collapse:collapse;
border:1px solid black;
}
th, td {
text-align:center;
vertical-align:middle;
}
</style>
</head>
<body ng-controller="myController">
Rows to display : <input type="number" step="1" min="0" max="3" ng-model="rowLimit" />
<br />
<br />
Search : <input type="text" placeholder="Search Countries & Cities" ng-model="searchText" />
<br />
<br />
<div>
<table style="padding:5px">
<thead>
<tr>
<th>Country</th>
<th>City 1</th>
<th>City 2</th>
<th>City 3</th>
<th>Flag</th>
<th>Foundation Date</th>
<th>Likes</th>
<th>Dislikes</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="country in countries | orderBy : '+foundationDate' | limitTo: rowLimit | filter : search">
<td>{{ country.name }}</td>
<td ng-repeat="city in country.cities">
{{ city.name }}
</td>
<td><img ng-src="{{ country.flag }}" style="height:100px;width:150px"/> </td>
<td>{{ country.foundationDate | date : "dd/MM/yyyy" }}</td>
<td>{{ country.likes }}</td>
<td>{{ country.dislikes }}</td>
<td><input type="button" value="Like" ng-click="incrementLikes(country)"</td>
<td><input type="button" value="Dislike" ng-click="incrementDislikes(country)"</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
表，th，td{
边界塌陷：塌陷；
边框：1px纯黑；
}
th，td{
文本对齐：居中；
垂直对齐：中间对齐；
}
要显示的行：
搜索：
国家
城市1
城市2
城市3
旗帜
基金会日期
喜欢
不喜欢
行动
{{country.name}
{{city.name}
{{country.foundationDate}日期：“dd/MM/yyyy”}
{{country.likes}
{{country.dislikes}
我认为您的问题可能只是forEach
中的匿名函数。它将向匿名函数返回true，但不会向外部函数$scope.search（）
返回true。因此，与其直接从函数返回，不如变异一个变量并在最后返回，或者使用reduce
，而不是forEach
$scope.search = function (country) {
if ($scope.searchText == undefined) {
return true;
}
if (country.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1)
return true;
var found = false;
angular.forEach(country.cities, function (item) {
if (item.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1)
found = true;
});
return found;
}
我认为您的问题可能只是forEach
中的匿名函数。它将向匿名函数返回true，但不会向外部函数$scope.search（）
返回true。因此，与其直接从函数返回，不如变异一个变量并在最后返回，或者使用reduce
，而不是forEach
$scope.search = function (country) {
if ($scope.searchText == undefined) {
return true;
}
if (country.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1)
return true;
var found = false;
angular.forEach(country.cities, function (item) {
if (item.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1)
found = true;
});
return found;
}
假设正在调用搜索函数，则只返回一个布尔值，供过滤器搜索对象。由于要传递给过滤器的模型对象没有可搜索的布尔属性，因此不会产生任何结果。您要做的是根据过滤后的模型过滤searchText的字符串值
如果您只想显式搜索模型的城市名称，我建议将属性名称传递给过滤器
<tr ng-repeat="country in countries | filter : {cities.name : searchText} : true | limitTo: rowLimit | orderBy : '+foundationDate'">
您可以像html标记中的内置角度过滤器一样使用它
<tr ng-repeat="country in countries | filterCountryCityNames : searchText | orderBy : '+foundationDate'| limitTo: rowLimit ">
假设正在调用搜索函数，则只返回一个布尔值，供过滤器搜索对象。由于要传递给过滤器的模型对象没有可搜索的布尔属性，因此不会产生任何结果。您要做的是根据过滤后的模型过滤searchText的字符串值
如果您只想显式搜索模型的城市名称，我建议将属性名称传递给过滤器
<tr ng-repeat="country in countries | filter : {cities.name : searchText} : true | limitTo: rowLimit | orderBy : '+foundationDate'">
您可以像html标记中的内置角度过滤器一样使用它
<tr ng-repeat="country in countries | filterCountryCityNames : searchText | orderBy : '+foundationDate'| limitTo: rowLimit ">
filter:搜索文本，而不是搜索。它与您的ng型号相匹配。我已经搜索了全国各地的名称以及与该国相关的城市名称。所以$scope.search就在那里。另外，佛罗里达不是一个城市，而是一个州。从技术上讲，它是一个佛罗里达州，俄亥俄州，但是的，它主要被称为一个州。对不起，我的错。这完全不是故意的。filter:searchText，而不是search。它与您的ng型号相匹配。我已经搜索了全国各地的名称以及与该国相关的城市名称。所以$scope.search就在那里。另外，佛罗里达不是一个城市，而是一个州。从技术上讲，它是一个佛罗里达州，俄亥俄州，但是的，它主要被称为一个州。对不起，我的错。这完全不是故意的。但是这会在所有的栏中搜索，对吗？你能帮我做同样的事情吗。我对此没有多少想法。我才刚刚开始，这很有帮助。是的，谢谢你指出我犯错误的地方。很抱歉花了这么长时间！没问题，先生：）真的很感谢你的努力。但是那会在所有的栏目中搜索，对吗？你能帮我做同样的事情吗。我对此没有多少想法。我才刚刚开始，这很有帮助。是的，谢谢你指出我犯错误的地方。很抱歉花了这么长时间！没问题，先生：）非常感谢你的努力。不过他需要城市和州。@Vance Rivera我完全理解你想要实现的目标，但有点好奇obj的第一个参数是什么？您只发送searchText参数，对吗？那么为什么选择第一个参数呢？第一个参数是您试图筛选的模型obj。Angular会自动将模型传递到过滤器。冒号后面的任何内容都是您要传递的额外参数，但过滤器本身将传递您要过滤的对象。@LukaJacobowitz，您是对的，luka，但您的答案也没有搜索国家。新的更新看起来很有效。不过，我为您更新了它。好的一面是，您可以在此应用程序中对任何视图重复使用此过滤器。不过，他需要城市和州。@Vance Rivera我完全理解您试图实现的目标，但有点好奇obj的第一个参数是什么？您只发送searchText参数，对吗？那么为什么选择第一个参数呢？第一个参数是您试图筛选的模型obj。Angular会自动将模型传递到过滤器。冒号后面的任何内容都是您要传递的额外参数，但过滤器本身将传递您要过滤的对象。@LukaJacobowitz，您是对的，luka，但您的答案也没有搜索国家。新的更新看起来很有效。我更新了t