0
Я успешно заселены назначения выбрать опцию через Json и теперь я хотел создать несколько флажка фильтра в результаты поиска ..опция Флажка = выбрать параметры - angularjs
Здесь ниже рабочий код для выбора опции
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>У меня есть 2 проблемы в этом коде.
1. нулевое значение в текущей опции выбора (необходимо удалить)
2. Сделать работу Check Box Options
Я надеюсь, что я дал подробно
Я обновил Plunker код. но поиск с флажком не работает, вы можете объяснить или тренироваться с этим кодом? –
http://plnkr.co/edit/Yp8kHFMRU5v6HXOuwuJz?p=preview – mohamedrias
Работает отлично, но многократная фильтрация флажка не работает в этом. –