私が必要としているのは、値の関連付けを維持しながら、select 要素の子オプション ノードをテキストでソートできるようにすることです。アルファベット順に並べてキーとの関連付けを解除するか、アルファベット順に並べ替えずにキーを関連付けることができます。
JSON に直接アクセスする方法があることは知っていますが、これは段階的な実装であり、その機能は後で提供されます。MyInterface.js今のところ、アプリ スクリプトが読み込まれるときに、前処理スクリプト ブロックを介して json を読み込む必要があります。
カスタム フィルターを調査しましたが、それがキーからの関連付けの解除の原因です。JSON をまったく別の形式にする必要がある場合は、喜んで採用します。
これが私が持っているものです...
HTML
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-app="MyInterface" ng-controller="SimpleJSON">
<select name="index_category"
ng-model="IndexCategory"
ng-init="IndexCategory = IndexCategory || '0'"
ng-options="option in JSON.Categories | orderObjectBy:'val'">
<option value="0">Select Animal...</option>
</select>
</div>
<script>
var json = {
"123":"Zebra",
"456":"Monkey",
"789":"Anteater"
};
</script>
<script src="MyInterface.js"></script>
</body>
</html>
MyInterface.js
(function(json) {
// AngularJS Module
var MyInterface = angular.module('MyInterface', []);
// Custom Filters
MyInterface.filter('orderObjectBy', function() {
return function(items, field, reverse) {
var filtered = [];
angular.forEach(items, function(item) {
filtered.push(item);
});
filtered.sort(function(a, b) {
return a[field] > b[field] ? 1 : -1;
});
if(reverse) filtered.reverse();
return filtered;
};
});
// Controllers
MyInterface.controller('SimpleJSON', function($scope) {
$scope.JSON = angular.fromJson(json);
});
})(json);
基本的に、選択にオプションごとに必要なものは次のとおりです。
<option value="0">Select Animal...</option>
<option value="789">Anteater</option>
<option value="456">Monkey</option>
<option value="123">Zebra</option>
承認された回答を組み込んだ変更
HTML
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-app="MyInterface" ng-controller="SimpleJSON">
<select name="index_category"
ng-model="IndexCategory"
ng-options="option.value for option in JSON track by option.key">
<option value="">Select Animal...</option>
</select>
</div>
<script>
var json = [
{ key:"123", value:"Zebra" },
{ key:"456", value:"Monkey" },
{ key:"789", value:"Anteater" }
];
</script>
<script src="MyInterface.js"></script>
</body>
</html>
MyInterface.js
(function(json) {
// AngularJS Module
var MyInterface = angular.module('MyInterface', []);
// Controllers
MyInterface.controller('SimpleJSON', function($scope, orderByFilter) {
// Load JSON
$scope.JSON = angular.fromJson(json);
// Alphabetize by Value
$scope.JSON = orderByFilter($scope.JSON, 'value');
});
})(json);