Question

我有一个表单，我从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

Answer 1

尝试使用ng-options指令。

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

Answer 2

有两种方法可以实现这一目标：

1。您可以在每个对象中添加一个属性名称 selected ，并将其中一个标记为true，您要在其中预填充下拉列表。

<强>样本

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>

您可以将所选值分配到select元素的 ng-model 。

<强>样本

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>

使用角度

2 个答案: