반응형
AngularJS를 사용하여 JSON 피드에서 선택 드롭 다운 목록을 어떻게 채울 수 있습니까?
나는 예제를 열심히 찾고 있었지만 전혀 찾을 수 없었습니다. 내가 아는 유일한 것은 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>
이를 수행하는 적절한 방법은 ng-options지시문을 사용하는 것입니다 . HTML은 다음과 같습니다.
<select ng-model="selectedTestAccount"
ng-options="item.Id as item.Name for item in testAccounts">
<option value="">Select Account</option>
</select>
자바 스크립트 :
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();
}
And inside the customDropdown directive template(note that this is only one part of the bootstrap 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>
반응형
'programing tip' 카테고리의 다른 글
| ios 사용법 설명에 대한 edit-config : doc.find는 함수가 아닙니다. (0) | 2020.11.26 |
|---|---|
| 브라우저에서 항상 수직 스크롤바를 표시하는 방법은 무엇입니까? (0) | 2020.11.26 |
| 2015 년 4 월 20 일 이후 (v3 API없이) Youtube 채널 RSS 피드를받는 방법은 무엇입니까? (0) | 2020.11.26 |
| Xcode의 디버그 콘솔 출력에서 자동 레이아웃 제약 조건 오류 메시지 비활성화 (0) | 2020.11.26 |
| Internet Explorer는 CSS 전환을 지원합니까? (0) | 2020.11.26 |