Anzeige ausgewählte Option in Dropdown mit Winkel

Ich habe ein Formular und bekomme Werte für dieses Formular, von loadEditLevDetails Funktion.
Ich habe alle Feldwerte außer Feld gebunden, ich weiß nicht, wie man es bindet.
Eine weitere Sache, wenn ich auf edit Schaltfläche klicken kann ich die Feldwerte ändern und ich kann einige andere Dropdown-Option wählen, für die ich Daten laden von getLeaveTypeList Methode.
Basierend auf der ausgewählten Option available leaves wird das Feld automatisch ausgefüllt.Anzeige ausgewählte Option in Dropdown mit Winkel

<body ng-app="intranet_App" ng-controller="myCtrl" ng-init="init()"> 
    <div class="container">  
     <form id="row editLeaveDetails" ng-repeat="data in leaveDetails"> 
      <div> 
       <label>Leave Applied On</label> 
       <input type="text" name="" ng-model="data.From | date : 'dd/MM/yyyy' "> 
      </div> 
      <div> 
       <label>Leave Type</label> 
       <select type="text" name="" class="col-xs-12 form-control rField" id="levType" ng-model="data.Leave_type_id" ng-blur="leaveBalance(data.Leave_type_id)"><option value="" selected="selected">Select</option><option data-ng-repeat="data in leaveTypes" value="{{data.id}}">{{data.Name}}</option></select> 
      </div> 
      <div> 
       <label>Availabe Leaves</label> 
       <input type="text" name="" id="levTaken" > 
      </div> 
      <div> 
       <label>Date From</label> 
       <input type="text" id="levFrom" onfocus="(this.type='date')" ng-model="data.From | date : 'dd/MM/yyyy' "> 
      </div> 
      <div> 
       <label>Date To</label> 
       <input type="text" id="levTo" onfocus="(this.type='date')" ng-model="data.To | date : 'dd/MM/yyyy'" > 
      </div> 
      <div> 
       <label>Duration</label> 
       <input type="text" id="levDuration" ng-model="data.Duration"> 
      </div> 
      <div> 
       <label>Reason</label> 
       <textarea id="LevReason" ng-model="data.Note"></textarea> 
      </div> 
      <div class="row pull-right "> 
       <button class="btn btn-warning editLevDetails btnLeft" ng-click="editDetails()" ng-if="!editMode">Edit</button> 
      </div> 
     </form>       
    </div> 
</body> 

<script> 
    var app=angular 
        .module('intranet_App', []) 
        .controller('myCtrl', function ($scope, $http) { 
         $scope.editMode = false; 
         $scope.init = function() { 
          $scope.loadLeaves(); 
          $http.post("/leave/getLeaveTypeList").then(function (response) { 
           $scope.leaveTypes = response.data; 
          }) 
         } 
         $scope.loadEditLevDetails = function (id) { 
          $scope.Id = { leaveRequestId: id }; 
          console.log($scope.Id) 
          var requestHeaders = { 
           'content-type': 'application/json' 
          } 
          var httpRequest = { 
           method: 'post', 
           url: "/leave/editLeaveRequest", 
           headers: requestHeaders, 
           data: $scope.Id 
          } 
          $http(httpRequest).then(function (response) { 
           $scope.leaveDetails = response.data; 
           console.log($scope.leaveDetails) 
          }) 
         } 
         $scope.leaveBalance = function (selectedvalue) { 
          $scope.leaveTypeId = { leaveTypeId: selectedvalue }; 
          var requestHeaders = { 
           "content-type": 'application/json' 
          } 
          var httpRequest = { 
           method: 'POST', 
           url: '/leave/getLeaveBalenceCount', 
           headers: requestHeaders, 
           data: $scope.leaveTypeId 
          } 
          $http(httpRequest).then(function (response) { 
           $scope.noOfValues = response.data; 
           $scope.balanceCount = $scope.noOfValues[0].balance_count; 
          }) 
         } 

        }) 
</script>

Bitte lassen Sie mich jemanden wissen, wie man ausgewählte Option im Dropdown-Menü anzeigen?

Das ist meine leaveTypes json.

Quelle

2017-06-19 user7397787

Verwenden Sie die ng-options Richtlinie.

<select ng-model="data.Leave_type_id" 
    ng-options="leaveType.id as leaveType.name for leaveType in leaveTypes"> 
    <option>Select</option> 
</select>

Quelle

2017-06-19 06:38:30

Nein es ist nicht – user7397787

arbeiten Sind Sie sicher, dass der 'data.Leave_type_id' einen Wert hat? –

ya ya hat es Wert 'sick leave' und bin auch Laden Drop-down dort – user7397787

Es gibt zwei Möglichkeiten, wie Sie dies erreichen können:

1. Sie können einen Eigenschaftsnamen als selected in jedem Objekt hinzufügen, und markieren Sie eine von ihnen wahr ist, was Sie wollen im Dropdown-Menü vorbelegt.

DEMO

var app = angular.module('MyApp', []) 
 
app.controller('MyController', function ($scope) { 
 
    $scope.leaveTypes = [{ 
 
    id: 1, 
 
    Name: 'Casual Leave', 
 
    Selected: false 
 
    }, { 
 
    id: 2, 
 
    Name: 'National Leave', 
 
    Selected: true 
 
    }, { 
 
    id: 3, 
 
    Name: 'Regional Leave', 
 
    Selected: false 
 
    }]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="MyApp" ng-controller="MyController"> 
 
    <label>Leave Type</label> 
 
    <select type="text" name="" class="col-xs-12 form-control rField" id="levType"> 
 
    <option value="0">Select</option> 
 
    <option data-ng-repeat="data in leaveTypes" value="{{data.id}}" ng-selected="{{ data.Selected == true }}">{{data.Name}}</option> 
 
    </select> 
 
</div>

Sie einen ausgewählten Wert in die ng-model des Auswahlelement zuweisen können.

DEMO

var app = angular.module('MyApp', []) app.controller('MyController', function ($scope) { $scope.leaveTypes = [{ "id": "1", Name: 'Casual Leave' }, { "id": "2", Name: 'National Leave' }, { "id": "3", Name: 'Regional Leave' }]; $scope.selected = {"id": "2"}; });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div ng-app="MyApp" ng-controller="MyController"> <label>Leave Type</label> <select type="text" name="" class="col-xs-12 form-control rField" id="levType" ng-model="selected.id"> <option value="0">Select</option> <option data-ng-repeat="data in leaveTypes" value="{{data.id}}">{{data.Name}}</option> </select> </div>

Quelle

2017-06-19 06:50:49

Anzeige ausgewählte Option in Dropdown mit Winkel

Antwort

Verwandte Themen