मेरे पास मेरा ऐप सेट अप है जहां एक चयनित इनपुट का उपयोग करके उत्पादों की एक सूची रंग द्वारा फ़िल्टर की जा सकती है, मेरे पास $routeprovider भी है जो इस रंग परम को यूआरएल में मौजूद होने पर पृष्ठ पर पास कर रहा है।कोणीय?
अब मैं क्या करना चाहता हूं जब चयन बॉक्स बदल जाता है तो यूआरएल/मार्ग अपडेट करें। मैं मार्ग के चयन के परिवर्तन को कैसे बांधूं?
चयन एक undocumented एनजी-परिवर्तन पैरामीटर है कि आप एक समारोह कॉल करने के लिए उपयोग कर सकते हैं स्थापित करने के लिए है $location.path:
<select ... ng-model="color" ng-change="updatePath()">
नियंत्रक:
function MyCtrl($scope, $location) {
$scope.updatePath = function() {
$location.path(... use $scope.color here ...);
}
}
आपका <select> तत्व के साथ एक मॉडल के लिए बाध्य होंगे ng-model, जो आप $watch कर सकते हैं और $location.path या $location.search को अपडेट करने के लिए उपयोग कर सकते हैं। व्यक्तिगत रूप से, मैं $location.search उपयोग करने का सुझाव चाहते हैं: आप सिर्फ बदल सकते हैं पैरामीटर आप चाहते हैं, और इसके थोड़ा कम काम के बाद से आप अपने नियंत्रक में उस संपूर्ण पथ का ज्ञान होना जरूरी नहीं है।
तो यह सोचते हैं कि आप एक <select> तत्व इस तरह है:
<select ng-model="selectedColor" ng-options="color for color in colors">
आप $watch उपयोग कर सकते हैं अपने सीमित मान को देखने के लिए और अद्यतन अपने $location.search, null के लिए सेट करना सुनिश्चित करते हुए अगर रंग undefined या अन्यथा falsey (है यह खोज पैरामीटर को साफ़ करता है):
$scope.$watch('selectedColor', function (color) {
if (color) {
$location.search('color', color);
} else {
$location.search('color', null);
}
});
आप खोज पैरामीटर और आपके स्थानीय मॉडल के बीच दो-तरफा बाध्यकारी सेट अप करना चाहते हैं ताकि परिवर्तन आपके <select> में परिलक्षित होगा:
$scope.$watch('$location.search().color', function (color) {
$scope.selectedColor = color;
});
तो यह आपके कराई नियंत्रक में $routeParams.color तक पहुँचने का सिर्फ एक बात है।
एक पूरा काम कर उदाहरण के लिए इस plunk देखें।
एक आकर्षण की तरह काम करता है, हालांकि किसी कारण से चयन बॉक्स चयनित रंग के बजाय कुछ भी नहीं चुना जाता है> –
अपने नियंत्रक में, मार्ग से रंग पैरामीटर पर $ scope.color सेट करें। ध्यान दें कि यदि आप अपनी चयन सूची उत्पन्न करने के लिए ऑब्जेक्ट्स की एक सरणी का उपयोग कर रहे हैं, तो आपको उस सरणी के तत्व को इंगित करने के लिए $ scope.color सेट करना होगा। अधिक जानकारी के लिए [इस पोस्ट] देखें (http://stackoverflow.com/questions/14297560/how-to-make-a-preselection-for-a-select-list-generated-by-angularjs)। –
मैं उत्पाद सरणी का उपयोग कर रहा चयन सूची को भरने के लिए, लेकिन यह भी इस (अंडरस्कोर) का उपयोग कर रहा है कि सरणी से अद्वितीय रंग खिताब खींचने के लिए 'code' $ scope.uniqueColours = function() { वापसी _। श्रृंखला ($ scope.products) \t \t .pluck ('colour_title') \t \t .flatten() \t \t .unique() \t \t।मूल्य(); \t}; 'कोड' तो यह अब प्रारंभिक उत्पाद सरणी को प्रतिबिंबित नहीं करता है। $ scope.by_colour = $ pathParams.colour_title सेट करना संभव नहीं है; –