AngularJSはng-Optionsにindexを加えた解決方法を実現する
1793 ワード
この例では,AngularJSがng−Optionsにindexを加えた解決法を実装することを示した.皆さんの参考にしてください.具体的には以下の通りです.
Angularjs交流群のある児童はAngular selectのng-OptionsにAngularjsのng-REPEatのようにインデックス$indexを加える方法を尋ねた.
実はこの問題に対してAngular自体は$indexのような変数を提供していません.しかし、この問題に対して私たちは解決策がないわけではありません.
この問題を角度から見るとjs配列の下付き文字が必要なので,オブジェクトに下付き文字を加えることができれば,式をoptionのlabelとして用いることで解決できる.
しかし、第一印象で思い出したのはjs配列がもともとkey/valueの対象であり、keyが配列に下付きを付けているだけなので、以下のような設計がありました.
html:
Angularjs交流群のある児童はAngular selectのng-OptionsにAngularjsのng-REPEatのようにインデックス$indexを加える方法を尋ねた.
実はこの問題に対してAngular自体は$indexのような変数を提供していません.しかし、この問題に対して私たちは解決策がないわけではありません.
この問題を角度から見るとjs配列の下付き文字が必要なので,オブジェクトに下付き文字を加えることができれば,式をoptionのlabelとして用いることで解決できる.
しかし、第一印象で思い出したのはjs配列がもともとkey/valueの対象であり、keyが配列に下付きを付けているだけなので、以下のような設計がありました.
html:
{{ a | json }}
js:
$scope.getDesc1 = function(key, value) {
return (parseInt(key, 10) + 1) + "->"+ value.field;
};
しかし なことに、JavaScriptに してkey/valueオブジェクトとしてkeyを すると、keyは になります.したがって、 の き は のようになります.
1->jw_companyTalent
2->jw_reportgroup
11->jw_ads
12->jw_jobcomment
13->jw_companyInfo
....
だからこれでは できない. いなことに、ngOptionsはAngularjsのfilterをサポートしているので、データソースオブジェクトにorderフィールドを けてシーケンス としてマークすることができます.さらに2 のAngularのissueではAngularがfix issueを っていることがわかり、optionは を き に します.
html:
{{ b | json }}
js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.t = [{
"field": "jw_companyTalent"
}, {
"field": "jw_reportgroup"
}];
$scope.getDesc = function(l) {
return l.order + "->"+ l.field;
};
}).filter("index", [
function() {
return function(array) {
return (array || []).map(function(item, index) {
item.order = index + 1;
return item;
});
};
}
]);
これでoptionは に って され, に たちはやっと に できたので, も わります. に なdemoplnkr ngOptions indexを します.
では、AngularJSプログラムの に つことを しています.