반응형
JSON 피드에서 선택한 드롭다운 목록을 AngularJS로 채우려면 어떻게 해야 합니까?
예시를 찾았지만 전혀 찾을 수 없었습니다.제가 아는 건 http 모듈을 사용하여 데이터를 가져올 수 있다는 것뿐입니다.이게 제가 지금 하고 있는 일이지만 Knockout으로 코딩되어 있습니다.AngularJS를 사용하여 이 기능을 재코딩하는 방법에 대해 조언해 주시겠습니까?
HTML
<select id="testAccounts"
data-bind="options: testAccounts, optionsValue: 'Id', optionsText: 'Name', optionsCaption: 'Select Account', value: selectedTestAccount">
</select>
자바스크립트
<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>
그것을 하는 적절한 방법은 지시를 사용하는 것이다.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 ]드롭다운에서 JSON 어레이(vm.zoneDropdown)를 ng-init로 초기화하고(디렉티브템플릿 내부에도 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();
}
custom Dropdown 디렉티브템플릿 내부(이것은 부트스트랩드롭다운의 일부에 불과합니다)
<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>
언급URL : https://stackoverflow.com/questions/15688313/how-can-i-populate-a-select-dropdown-list-from-a-json-feed-with-angularjs
반응형
'programing' 카테고리의 다른 글
| 참조가 DOM 요소를 가리킬 때 useEffect의 종속성으로 ref.current를 사용하는 것이 안전합니까? (0) | 2023.03.12 |
|---|---|
| 장고와 리액트 입수하는 방법JS가 같이 일한다고? (0) | 2023.03.12 |
| Javascript에는 필수 vs .default가 필요합니다. (0) | 2023.03.07 |
| Oracle - SQL 개발자로부터 스크립트를 생성하는 방법 (0) | 2023.03.07 |
| Spring Reactor 웹 앱에서 일련의 작업을 수행하고 다음 작업을 완료하기 전에 하나의 작업을 완료하려면 어떻게 해야 합니까? (0) | 2023.03.07 |