私は例を探していましたが、何も見つかりませんでした。私が知っている唯一のことは、httpモジュールを使用してデータを取得できることです。これが現在私がやっていることですが、Knockoutでコーディングされています。誰かがAngularJSを使用してこの機能を再コーディングする方法についてアドバイスをくれますか?
HTML
<select id="testAccounts"
data-bind="options: testAccounts, optionsValue: 'Id', optionsText: 'Name', optionsCaption: 'Select Account', value: selectedTestAccount">
</select>
Javascript
<script type='text/javascript'>
$(document).ready(function () {
var townSelect = function () {
var self = this;
self.selectedTestAccount = ko.observable();
self.testAccounts = ko.observableArray();
var townViewModel = new townSelect();
ko.applyBindings(townViewModel);
$.ajax({
url: '/Admin/GetTestAccounts',
data: { applicationId: 3 },
type: 'GET',
success: function (data) {
townViewModel.testAccounts(data);
}
});
});
</script>
適切な方法は ng-options
ディレクティブ を使用することです。 HTMLは次のようになります。
<select ng-model="selectedTestAccount"
ng-options="item.Id as item.Name for item in testAccounts">
<option value="">Select Account</option>
</select>
JavaScript:
angular.module('test', []).controller('DemoCtrl', function ($scope, $http) {
$scope.selectedTestAccount = null;
$scope.testAccounts = [];
$http({
method: 'GET',
url: '/Admin/GetTestAccounts',
data: { applicationId: 3 }
}).success(function (result) {
$scope.testAccounts = result;
});
});
また、angularがHTMLで実行され、モジュールがロードされていることを確認する必要があります。
<html ng-app="test">
<body ng-controller="DemoCtrl">
....
</body>
</html>
<select name="selectedFacilityId" ng-model="selectedFacilityId">
<option ng-repeat="facility in facilities" value="{{facility.id}}">{{facility.name}}</option>
</select>
これは、使用方法の例です。
Angular Bootstrapドロップダウンで、ng-initを使用してJSON配列(vm.zoneDropdown)を初期化し(ディレクティブテンプレート内でng-initを使用することもできます)、配列を渡しますカスタムsrc属性
<custom-dropdown control-id="zone" label="Zona" model="vm.form.zone" src="vm.zoneDropdown"
ng-init="vm.getZoneDropdownSrc()" is-required="true" form="farmaciaForm" css-class="custom-dropdown col-md-3"></custom-dropdown>
コントローラー内部:
vm.zoneDropdown = [];
vm.getZoneDropdownSrc = function () {
vm.zoneDropdown = $customService.getZone();
}
また、customDropdownディレクティブテンプレート内(これはbootstrapドロップダウンの一部にすぎないことに注意してください):
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
<li role="menuitem" ng-repeat="dropdownItem in vm.src" ng-click="vm.setValue(dropdownItem)">
<a ng-click="vm.preventDefault($event)" href="##">{{dropdownItem.text}}</a>
</li>
</ul>