从数据库获取值并使用Angularjs将其设置为下拉列表的选定值

时间:2017-12-20 07:44:42

标签: angularjs

我从数据库中获取了一些值。使用其中一个值,我希望在另一个下拉列表更改时将其作为下拉列表中的选定值。请参阅以下代码:

索引

<div class="form-group">
    <select ng-model="editProject.ClientId" name="client_id" ng-options="item as item.Company for item in clientList" class="form-control">
    </select>
    <div>-->{{editProject.ClientId}}</div> <=== This is to see if I am getting the value from js
    <span style="color: red;" ng-show="formEditProject.client_id.$touched && formEditProject.client_id.$invalid">Select a client</span>
</div>

JS

//=== This is the client list in the dropdown list ===>
$scope.editClient = {
    "ClientId": null,
    "Company": null,
    "ContactPerson": null,
    "EmailAddress": null
}

//== Retrieves clients from the database on page load ===>
$scope.getClients = function () {
    return $http.get('/Clients/GetClients')
        .then(function (response) {
            $scope.clientList = response.data;
        });
};

//== Event when a different dropdownlist is changed ===>
$scope.onProjectEditChange = function () {
    console.log($scope.selectedProjectId.Id);
    $http({
            url: '/Project/GetProjectByProjectId',
            params: {
                "id": $scope.selectedProjectId.Id
            },
            method: 'post'
        })
        .then(function (response) {
        $scope.editProject.Id = response.data.Id;
        $scope.editProject.Description = response.data.Description;
        $scope.editProject.ClientId = response.data.ClientId;
        $scope.editProject.ProjectLead = response.data.ProjectLead;
        $scope.editProject.IsApproved = response.data.IsApproved;
    });
}

我能够在<div>-->{{editProject.ClientId}}</div>中看到clientId更改,但它不会更改下拉列表的选定值。

1 个答案:

答案 0 :(得分:0)

Use ng-change option and check it
<div class="form-group">
    <select ng-model="editProject.ClientId" name="client_id" ng-options="item as item.Company for item in clientList" class="form-control" ng-change='changeSelectedItem(editProject.ClientId")'>
    </select>
    <div>-->{{editProject.ClientId}}</div> <=== This is to see if I am getting the value from js
    <span style="color: red;" ng-show="formEditProject.client_id.$touched && formEditProject.client_id.$invalid">Select a client</span>
</div>


$scope.changeSelectedItem = function(client){
        $scope.editProject.ClientId= client.ClientId;
}