checkbox options=选择选项-angularjs
checkbox options = select options - angularjs
我已经成功地通过Json填充了Designations以选择选项,现在我想为我的搜索结果创建多复选框过滤器。。
下面是选择选项的工作代码
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var json = {
"modules": [{
"myid": "70",
"realname": "Kishore",
"full_name": "Kishore Chandra",
"category": "professional",
"firm_name": "Yes",
"designation": "Design-Build Firm",
"address": "Dwarakanagar 5th lane"
}, {
"myid": "75",
"realname": "Vinod kumar",
"full_name": "Kishore Chandra",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "76",
"realname": "Pradeep Reddy",
"full_name": "PRADEEP REDDY",
"category": "professional",
"firm_name": "",
"designation": "Civil Engineer",
"address": "Visakapatnam, Andhra Pradesh, India"
}, {
"myid": "78",
"realname": "Pradeep Raju",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "79",
"realname": "Pradeep kumar",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "80",
"realname": "Pradeep",
"full_name": "Pradeep",
"category": "professional",
"firm_name": "",
"designation": "Architect",
"address": "Akkayapalem"
}, {
"myid": "81",
"realname": "Pradeep",
"full_name": "Pradeep Reddy ",
"category": "professional",
"firm_name": "",
"designation": "Civil Engineer",
"address": "Jubliee Hills"
}, {
"myid": "82",
"realname": "krishna",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "83",
"realname": "raghu",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "84",
"realname": "Pradeep",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "85",
"realname": "Pradeep",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "86",
"realname": "Pradeep",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "87",
"realname": "Pradeep",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "88",
"realname": "Pradeep",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "89",
"realname": "Pradeep",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "72",
"realname": "recobee",
"full_name": "Kishore Chandra",
"category": "vendor",
"firm_name": "Recobee",
"designation": "Hardware",
"address": "55-2-27'/1, Old Venkojipalem, Near Andhra Bank, Hb Colony Road"
}, {
"myid": "90",
"realname": "Vinod kumar",
"full_name": "Tiles Vendor",
"category": "vendor",
"firm_name": "Vendor1",
"designation": "Tiles",
"address": "akkayapalem, "
}, {
"myid": "92",
"realname": "Vamsi Vytla",
"full_name": "vamsi vytla",
"category": "vendor",
"firm_name": "vytla cements",
"designation": "Cement Suppliers",
"address": "akkayapalem"
}, {
"myid": "93",
"realname": "Bhaskar",
"full_name": "Surya Bhaskar",
"category": "vendor",
"firm_name": "Talatam",
"designation": "Doors and Windows",
"address": "Hitech city"
}, {
"myid": "94",
"realname": "Naren",
"full_name": "Naren Mandala",
"category": "vendor",
"firm_name": "Mandala Hardwares",
"designation": "Hardware",
"address": "Malleshwaram road"
}, {
"myid": "95",
"realname": "Sreetej",
"full_name": "Sreetej Vincent",
"category": "vendor",
"firm_name": "Vincent Paints",
"designation": "Paintings",
"address": "Navi Mumbai"
}, {
"myid": "96",
"realname": "Raja",
"full_name": "Ramesh Raja Galla",
"category": "vendor",
"firm_name": "Galla plumbing ",
"designation": "Plumbing & Bathware",
"address": "Karol Bagh "
}, {
"myid": "97",
"realname": "Prasanna kumar",
"full_name": "Prasanna kumar",
"category": "vendor",
"firm_name": "JP cement",
"designation": "Cement Suppliers",
"address": "poonamalle road"
}, {
"myid": "98",
"realname": "Phalgun",
"full_name": "Phalgun Moturu",
"category": "vendor",
"firm_name": "Moturu Tiles",
"designation": "Tiles",
"address": "benz circle"
}, {
"myid": "99",
"realname": "Pavan",
"full_name": "Pavan kumar",
"category": "vendor",
"firm_name": "Pavan Constructions",
"designation": "Cement Suppliers",
"address": "Jubliee hills"
}]
};
$scope.ocw = json;
var allCategories = json.modules.map(function(item) {
return item.designation
});
var filteredCategories = [];
allCategories.forEach(function(item) {
if (filteredCategories.indexOf(item) < 0 && item) {
filteredCategories.push(item);
}
});
$scope.categories = filteredCategories;
});
<html ng-app="plunker">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="MainCtrl">
<form>
<div ng-repeat="designation in categories">
<input type="checkbox" ng-model="search.designation" name="search.designation{{$index}}" checklist-value="search.designation">{{designation}}
</div>
<label>Category
<select ng-model="search.designation" ng-options="category for category in categories"></select>
</label>
Designation :
<input type="text" ng-model="search.designation">Real name :
<input type="text" ng-model="search.realname">
</form>
<table class="table table-bordered" ng-repeat="module in ocw.modules | filter:search">
<tr>
<td>
<h3 class="moduletitle">Name : {{ module.realname }}</h3>
<p>Designation : {{ module.designation }}</p>
<p>Category : {{ module.category }}</p>
<p>Fullname : {{ module.full_name }}</p>
</td>
</tr>
</table>
</body>
</html>
Plunker代码
我在这个代码中有两个问题。
1。当前选择选项中的空值(要删除它)
2。使其工作的复选框选项
我希望我已经给出了详细的
要删除空值:
在添加item
之前,检查真值并添加
allCategories.forEach(function(item) {
if(filteredCategories.indexOf(item) < 0 && item) {
filteredCategories.push(item);
}
});
关于复选框:您需要创建一个自定义过滤器才能工作。
app.filter("selectedDesignation", function() {
return function(module, tags) {
if (tags.length < 1) return module;
return module.filter(function(mod) {
return (tags.indexOf(mod.designation) > 0) ? true : false;
})
}
});
在您的HTML:中
<table class="table table-bordered" ng-repeat="module in ocw.modules | filter:search.designation | selectedDesignation: search.tags">
<input type="checkbox" ng-click="updateFilter(designation)" > {{designation}}
您正在迭代指定,但打印search.designation
,这就是为什么不存在值的原因。
控制器内:
$scope.search = {
designation: "",
tags: []
}
$scope.updateFilter = function(value) {
if ($scope.search.tags.indexOf(value) < 0) $scope.search.tags.push(value);
else $scope.search.tags.splice($scope.search.tags.indexOf(value), 1)
}
DEMO
最终解决我已将选择选项替换为复选框选项
以及使用多选
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var json = {
"modules": [{
"myid": "70",
"realname": "Kishore",
"full_name": "Kishore Chandra",
"category": "professional",
"firm_name": "Yes",
"designation": "Design-Build Firm",
"address": "Dwarakanagar 5th lane"
}, {
"myid": "75",
"realname": "Vinod kumar",
"full_name": "Kishore Chandra",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "76",
"realname": "Pradeep Reddy",
"full_name": "PRADEEP REDDY",
"category": "professional",
"firm_name": "",
"designation": "Civil Engineer",
"address": "Visakapatnam, Andhra Pradesh, India"
}, {
"myid": "78",
"realname": "Pradeep Raju",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "79",
"realname": "Pradeep kumar",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "80",
"realname": "Pradeep",
"full_name": "Pradeep",
"category": "professional",
"firm_name": "",
"designation": "Architect",
"address": "Akkayapalem"
}, {
"myid": "81",
"realname": "Pradeep",
"full_name": "Pradeep Reddy ",
"category": "professional",
"firm_name": "",
"designation": "Civil Engineer",
"address": "Jubliee Hills"
}, {
"myid": "82",
"realname": "krishna",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "83",
"realname": "raghu",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "84",
"realname": "Pradeep",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "85",
"realname": "Pradeep",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "86",
"realname": "Pradeep",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "87",
"realname": "Pradeep",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "88",
"realname": "Pradeep",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "89",
"realname": "Pradeep",
"full_name": "",
"category": "professional",
"firm_name": "",
"designation": null,
"address": null
}, {
"myid": "72",
"realname": "recobee",
"full_name": "Kishore Chandra",
"category": "vendor",
"firm_name": "Recobee",
"designation": "Hardware",
"address": "55-2-27'/1, Old Venkojipalem, Near Andhra Bank, Hb Colony Road"
}, {
"myid": "90",
"realname": "Vinod kumar",
"full_name": "Tiles Vendor",
"category": "vendor",
"firm_name": "Vendor1",
"designation": "Tiles",
"address": "akkayapalem, "
}, {
"myid": "92",
"realname": "Vamsi Vytla",
"full_name": "vamsi vytla",
"category": "vendor",
"firm_name": "vytla cements",
"designation": "Cement Suppliers",
"address": "akkayapalem"
}, {
"myid": "93",
"realname": "Bhaskar",
"full_name": "Surya Bhaskar",
"category": "vendor",
"firm_name": "Talatam",
"designation": "Doors and Windows",
"address": "Hitech city"
}, {
"myid": "94",
"realname": "Naren",
"full_name": "Naren Mandala",
"category": "vendor",
"firm_name": "Mandala Hardwares",
"designation": "Hardware",
"address": "Malleshwaram road"
}, {
"myid": "95",
"realname": "Sreetej",
"full_name": "Sreetej Vincent",
"category": "vendor",
"firm_name": "Vincent Paints",
"designation": "Paintings",
"address": "Navi Mumbai"
}, {
"myid": "96",
"realname": "Raja",
"full_name": "Ramesh Raja Galla",
"category": "vendor",
"firm_name": "Galla plumbing ",
"designation": "Plumbing & Bathware",
"address": "Karol Bagh "
}, {
"myid": "97",
"realname": "Prasanna kumar",
"full_name": "Prasanna kumar",
"category": "vendor",
"firm_name": "JP cement",
"designation": "Cement Suppliers",
"address": "poonamalle road"
}, {
"myid": "98",
"realname": "Phalgun",
"full_name": "Phalgun Moturu",
"category": "vendor",
"firm_name": "Moturu Tiles",
"designation": "Tiles",
"address": "benz circle"
}, {
"myid": "99",
"realname": "Pavan",
"full_name": "Pavan kumar",
"category": "vendor",
"firm_name": "Pavan Constructions",
"designation": "Cement Suppliers",
"address": "Jubliee hills"
}]
};
$scope.ocw = json;
var allCategories = json.modules.map(function(item) {
return item.designation
});
var filteredCategories = [];
allCategories.forEach(function(item) {
if (filteredCategories.indexOf(item) < 0 && item) {
filteredCategories.push(item);
}
});
$scope.search = {
designation: ""
}
$scope.categories = filteredCategories;
$scope.isFiltered = function(val) {
return $scope.search.designations[val.designation];
}
});
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form>
<div ng-repeat="designation in categories">
<input type="checkbox" ng-model="search.designations[designation]"> {{designation}}
</div>
Full name: <input type="text" ng-model="search.full_name">
</form>
<table class="table table-bordered" ng-repeat="module in ocw.modules | filter:isFiltered | filter:{full_name:search.full_name}">
<tr>
<td>
<h3 class="moduletitle">Name : {{ module.realname }}</h3>
<p>Designation : {{ module.designation }}</p>
<p>Category : {{ module.category }}</p>
<p>Fullname : {{ module.full_name }}</p>
</td>
</tr>
</table>
</body>
</html>
http://plnkr.co/edit/QNS5iX3atZ8C7lrG1gyU?p=preview
相关文章:
- AngularJs列表ng单击以选择选项转换
- 如何使用AngularJs禁用ng选项中的选项
- 如何放置'选择'基于angularJS中数据的html选项
- 如何将ng选项的索引作为angularJs中的值传递给模型
- AngularJS ng选项在选择一个选项后删除了默认的空白值
- 当使用select作为标签时,如何使用ng选项禁用angularjs中的选项
- Angularjs-设置不带ng选项的select的默认值
- LEAFLET地图和带有选择选项的标记-ANGULARjs
- 使用 AngularJS 设置活动选项卡样式
- AngularJS 指令的动态选项
- AngularJS选项卡集中的Chart.js不呈现
- AngularJS$作用域在选项卡集中出现问题
- AngularJS-选择选项并在函数中使用它
- AngularJS模型在手动更改选项后不会更新
- AngularJS:点击选项卡刷新视图中的数据
- 在AngularJS Dropdownlost中设置默认文本选项
- checkbox options=选择选项-angularjs
- ng-Options 编辑选项 - AngularJS
- 在选择框中选择默认选项- AngularJs
- 将select重置为特定选项AngularJs和Javascript/JQuery