javascript - 下拉列表未在 Edit-Profile 案例中设置其 ng-model 值

Question

我的下拉列表未设置其 ng-model Edit-Profile Case 中的值

Here is my Controller.js method which calls service.js method and get data from database in Json format

function CountryList() {
    var getUserData = crudAJService.CountryList();  // calls Service method
    getUserData.then(function (response) {
        $scope.countryList = response.data;
    }, function () {
        console.log("Can't read Country data");
    });

我正确地获取了 countryList 并且 html 按预期呈现(如我所料)

<select class="form-control ng-pristine ng-valid ng-valid-required ng-touched" name="country" required="" ng-model="countryid" 
ng-options="option.Value as option.Text for option in countryList" ng-change="GetSelectedState(countryid)">
  <option value="" class="" selected="selected">Choose Country</option>
  <option value="1" label="India">India</option>
  <option value="2" label="USA">USA</option>
  <option value="3" label="China">China</option>
  <option value="4" label="UK">UK</option>
  <option value="5" label="Australia">Australia</option>
  <option value="6" label="koria">koria</option>
  <option value="7" label="Pakistan">Pakistan</option>
</select>

还有 ng-change 方法可以从 Db 中获取与 countryId 相关的状态(Cascading-Dropdown)，该方法也可以顺利获取并正确呈现。

但在编辑个人资料的情况下，我的下拉列表未设置为 ng-model 值。？(未设置选定值)..

如果我绑定(bind) {{countryid}}，它也会在我的表单中得到正确的结果(用于测试目的)。

Here is my EditUser() method which is called when Edit button pressed from gridView.

$scope.EditUser = function (user) {
        var getUserData = crudAJService.getUser(user.UserID);
        getUserData.then(function (_user) {
        CountryList();            //this method is mention above.
        $scope.user = _user.data;
        $scope.firstName = user.FirstName;
        $scope.lastName = user.LastName;
        $scope.countryid = user.CountryID;
        Blah.. Blah.. So on
    }, function () {
                alert('Error in getting User records');
        });

我想我已经用代码提供了所有必要的信息。但如果您需要任何信息，请告诉我。

更新

正如你建议的那样，我为 ng-model 创建了一个对象，然后我像这样更改了 HTML

<select class="form-control" name="country" required="" ng-model="countryModel" ng-options="countryModel.Value as countryModel.Text for countryModel in countryList" ng-change="GetSelectedState(countryModel.Value)">

现在我的 controller.js EditUser() 方法是 Looks Like this Image ..

(见图片。)

Answer 1

ng-model 应该是具有两个属性 Value 和 Text 的对象。 ng-option 是一个对象数组。所以在你的情况下你的 countryList 是这样的:

$scope.countryList = [{Value: 1, Text: "India"}, {Value: 2, Text: "USA"}]

所以 countryid 必须是这样的对象:

$scope.countryid = {Value: 1, Text: "India"}

更新如果您只有国家/地区值，那么您可以使用它来构建“countryId”对象:

let selectedId = 1;
$scope.countryId = $scope.countryList.filter(function (country) { 
                    return country.Value == selectedId; 
                })[0];

select 元素的 HTML 将变成这样:

<select class="form-control" name="country" required="" ng-model="countryModel" ng-options="countryOpt as countryOpt.Text for countryOpt in countryList" ng-change="GetSelectedState(countryModel.Value)">