programing

angularjs에서 선택 상자의 기본값을 설정하려면 어떻게 해야 합니까?

powerit 2023. 3. 19. 19:31
반응형

angularjs에서 선택 상자의 기본값을 설정하려면 어떻게 해야 합니까?

개체를 편집하는 데 사용되는 양식이 있으며 선택 상자에서 값을 선택할 수 없습니다.

편집할 json 배열이 있으며 다음과 같습니다.

$scope.item = [{
    "objectID": "76",
    "versionID": "0",
    "versionName": "CURRENT",
    "objectName": "xyz",
}]

이와 동시에 다음과 같은 다른 json 배열의 선택 상자를 채웁니다.

$scope.versions = [
{
    "id": "0",
    "description": "CURRENT",
    "name": "CURRENT"
},
{
    "id": "114",
    "description": "description of Version 2",
    "name": "version2"
},
{
    "id": "126",
    "description": "description of Version 3",
    "name": "version3"
},
{
    "id": "149",
    "description": "description of Version 4",
    "name": "version4"
}] 

내 웹페이지에 다음과 같이 선택 상자를 만듭니다.

Version: <select ng-model="item.versionID"
                 ng-selected="item.versionID"
                 ng-options="version.name for version in versions"
                 required>

select 박스는 나를 위해 채워지고 있지만, 그것은 그 버전에 일치하는 값을 선택해야 한다.item둘 다 해봤어요.versionID그리고.versionName세팅까지 해봤습니다.ng-selected="0"그건 통하지도 않아요

여기 SO, Angularjs 사이트를 찾아보고 구글에서 수많은 튜토리얼을 검색했지만 여전히 문제가 있습니다.문제가 무엇인지 알 수 없기 때문에 도움을 주셔서 대단히 감사합니다.

JSFiddle 추가됨

여기에 JsFiddle 추가

ng-init은 이렇게 간단하게 사용할 수 있습니다.

<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options"></select>

그냥 붙이면 돼요.

track by version.id

당신의 ng-mother에게.

모델이 ID 또는 이름 속성에 바인딩되지 않고 각 속성에 바인딩되므로 기본값을 설정하지 않습니다.version물건.의 설정을 시도합니다.versionID오브젝트 중 하나에 접속하면 동작합니다.$scope.item.versionID = $scope.versions[2];

id 속성으로 설정하는 경우는, 다음의 구문을 추가할 필요가 있습니다.

ng-options="version.id as version.name for version in versions"

http://jsfiddle.net/LrhAQ/1/

여러 개의 작동하지 않는 옵션을 검색한 후 선택한 기본 옵션이 작동합니다.http://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/에서 클린 솔루션을 찾을 수 있습니다.

<select class="ajg-stereo-fader-input-name ajg-select-left"  ng-options="option.name for option in selectOptions" ng-model="inputLeft"></select>
<select class="ajg-stereo-fader-input-name ajg-select-right" ng-options="option.name for option in selectOptions" ng-model="inputRight"></select>

 scope.inputLeft =  scope.selectOptions[0];
 scope.inputRight = scope.selectOptions[1];

선택된 문서대로, 다음 코드가 나에게 효과가 있었다.

<div ng-controller="ExampleController">
<form name="myForm">
<label for="mySelect">Make a choice:</label>
<select name="mySelect" id="mySelect"
  ng-options="option.name for option in data.availableOptions track by     option.id"
  ng-model="data.selectedOption"></select>
</form>
<hr>
<tt>option = {{data.selectedOption}}</tt><br/>
</div>
  <select ng-model="selectedCar" ><option ng-repeat="car in cars "  value="{{car.model}}">{{car.model}}</option></select>
<script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.cars = [{model : "Ford Mustang", color : "red"}, {model : "Fiat 500", color : "white"},{model : "Volvo XC90", color : "black"}];
$scope.selectedCar=$scope.cars[0].model ;});

ng-model을 스태틱 값으로 초기화하지 않고 각 값이 DB에 의해 구동되는 경우 다음과 같은 방법으로 실행할 수 있습니다.각도는 평가된 값을 비교하고 드롭다운을 채웁니다.

아래 modelData.unitId는 DB에서 취득되어 db-와는 별개의 목록인 유닛 ID 목록과 비교됩니다.

 <select id="uomList" ng-init="modelData.unitId"
                         ng-model="modelData.unitId" ng-options="unitOfMeasurement.id as unitOfMeasurement.unitName for unitOfMeasurement in unitOfMeasurements">

언급URL : https://stackoverflow.com/questions/18380951/how-do-i-set-default-value-of-select-box-in-angularjs

반응형