AngularJs - 从下拉列表更新记录和显示数据

Question

问题：我有一个网格，我为其实现了创建和更新功能。在创建时，用户会得到一个模式对话框，其中包含一些字段和一些下拉列表（每个下拉列表都填充了来自数据库的数据）。

我遇到的问题是更新。如果用户想要从网格更新记录，他将选择行并单击一个按钮，该按钮将打开一个模式对话框，以“不可编辑模式”显示所有记录字段。只有当用户单击模式对话框底部的“编辑”按钮时，这些字段才会变得可编辑。 问题是：如何让下拉列表（即国家/地区列表）以“不可编辑模式”（例如爱尔兰）仅显示该特定记录的数据，并且一旦用户单击“编辑按钮”下拉菜单仍显示相同的数据（爱尔兰）。除非用户单击下拉菜单，然后该下拉菜单将显示整个国家/地区列表，因此最终可以选择不同的国家/地区。

为了举例，我将发布国家下拉列表的当前实现。这是我在创建模式对话框中使用的代码，对于更新模式对话框，它应该是类似的，但不知道如何从网格中显示所选记录的相关国家。

填充国家/地区下拉列表

                 <div class="control-group">
                      <label class="control-label">*Country</label>
                      <div class="input-append">
                          <div data-ng-init="getCountryDataFromServer()">
                              <b>Person Data:</b> <select id="countryId" ng-model="contact.countryId">
                              <option value="">-- Select Countries --</option>
                              <option data-ng-repeat="country in countries" value="{{country.countryId}}">{{country.countryname}}</option>
                          </select><br>
                          </div>
                      </div>
                      <div class="input-append">
                          <label>
                            <span class="alert alert-error"
                                  ng-show="displayValidationError && newContactForm.countryData.$error.required">
                                <spring:message code="required"/>
                            </span>
                          </label>
                      </div>
                  </div>

Ng-Init Angularjs 指令

//Load countries from JSON and populate the dropdown
$scope.getCountryDataFromServer = function() {

    $http({method: 'GET', url: '/tool/protected/country/all'}).
        success(function(data, status, headers, config) {
            $scope.countries = data;
        }).
        error(function(data, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
        });
};

Answer 1

请使用 ng-options 创建下拉列表

<select class="form-control" ng-model="countries.selectedCountry" 
ng-options="country in countries">
</select>

现在你只需要设置

$scope.countries.selectedCountry = "that country";

您要设置的国家/地区。

编辑：我看到了，您使用 contact.countryId 作为模型。您也可以使用它，但您必须确保您设置的值与下拉列表中的值完全相同。

Answer 2

我所做的是创建一个输入字段来显示当前的国家名称。当模态对话框处于不可编辑模式时，此字段设置为 ng-hide。如果用户单击“编辑”按钮而不是字段，我会得到设置为 ng-show 的下拉列表（如果模式对话框处于编辑模式）。在 UI 上，用户不会知道发生了什么，但我认为幕后的场景非常丑陋……但仍然是我的问题的解决方案。

代码

                   <div class="control-group" ng-class="{error: displayValidationError && updateContactForm.country.countryId.$error.required}">
                            <label class="control-label">*Country</label>
                            <div class="controls">
                                <input type="text" autofocus required ng-model="contact.countryId"
                                       name="country.countryname"
                                       placeholder="Status" ng-hide="editingUpdateForm" />
                                <div data-ng-init="getCountryDataFromServer()" ng-show="editingUpdateForm">
                                    <select id="contact.country.countryId" autofocus required ng-model="contact.country.countryId">
                                    <option data-ng-repeat="country in countries" value="{{country.countryId}}">{{country.countryname}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="help-inline"
                                  ng-show="displayValidationError && newContactForm.countryData.$error.required">
                                <spring:message code="required"/>
                            </div>
                        </div>