使用角度在下拉菜單中顯示選定的選項

我有一種形式，並且獲取此表單的值，從loadEditLevDetails函數。
我已綁定除leave type字段的所有字段值，我不知道如何綁定它。
還有一件事，當我點擊edit按鈕時，我可以更改字段值，我可以選擇其他一些下拉選項，因爲我正在從getLeaveTypeList方法加載數據。
根據選定的選項available leaves字段將自動填充。使用角度在下拉菜單中顯示選定的選項

<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>

請讓我知道任何人，如何在下拉菜單中顯示選定的選項？

這是我的leaveTypes json。

來源

2017-06-19 user7397787

嘗試使用ng-options指令。

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

來源

2017-06-19 06:38:30

沒有它不工作 – user7397787

你確定了'data.Leave_type_id'具有價值？ –

雅亞它有價值'病假'，也加載下降那裏 – user7397787

有兩種方法可以實現這一目標：

您可以添加屬性名稱中的每個對象selected並標出其中之一是真的要在下拉菜單中預填充。

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>

可以分配一個選定的值到選擇元件的ng-model。

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>

來源

2017-06-19 06:50:49

使用角度在下拉菜單中顯示選定的選項

回答

相關問題