Question

我有一个连接到数据库的简单AngularJS表单。

该表单在HTML表格中显示姓名和出生国家名单：

<table class="table table-bordered" style="max-width: 100%;" id="myAreas">
    <tr ng-repeat="name in Names">
        <td>{{name.FullName}}</td>
        <td>                               
            <select ng-model="selectedCountryForEdit" ng-show="editMode">
                <option ng-repeat="z in countryList" value="{{z.CountryCode}}">{{z.CountryName}}</option>
            </select>
            <span style="display: block;" ng-show="!editMode">{{areaItem.Countries}}</span>
        </td>                            
        <td><a href="" ng-click="editMode = !editMode"><i class="fa fa-pencil" aria-hidden="true"></i></a></td>
    </tr>                    
</table>

该表使用以下JS / Angular代码：

$http.get('/Home/GetNames')
    .then(function (response) {
        $scope.Names = response.data;
    })
    .catch(function (e) {
        console.log("error", e);
        throw e;
    })
    .finally(function () {
        console.log("This finally block");
    });

JS / Angular正在MVC上调用一个方法来列出数据库中的数据。

我不想包含MVC代码，因为它工作正常，我的问题依赖于其他内容：

如果查看html表格，每行都有一个铅笔图标，可以显示下拉菜单而不是国家。

我正在做的是在下拉菜单中填入数据库中的国家/地区列表，我希望下拉菜单显示所选行/名称的相同国家/地区。

我搜索了很多，但我找不到如何解决这个问题。我是Angular和JS的新手，我希望你能就此提出建议。

Answer 1

您需要将select ng-model更改为Names数组中的属性。恩。如果姓名具有att国家/地区，那么ng-model代替selectedCountryForEdit，将与Names相同。

<table class="table table-bordered" style="max-width: 100%;" id="myAreas">
    <tr ng-repeat="name in Names">
        <td>{{name.FullName}}</td>
        <td>                               
            <select ng-model="name.country" ng-show="editMode">
                <option ng-repeat="z in countryList" value="{{z.CountryCode}}">{{z.CountryName}}</option>
            </select>
            <span style="display: block;" ng-show="!editMode">{{areaItem.Countries}}</span>
        </td>                            
        <td><a href="" ng-click="editMode = !editMode"><i class="fa fa-pencil" aria-hidden="true"></i></a></td>
    </tr>                    
</table>

也会重新改变选择选项ng-repeat to ng-options导致这个选项具有更好的性能。

示例：

<select ng-model="name.country" ng-show="editMode" ng-options="z.countryCode as z.CountryName for z in countryList">
    <option value="">Select...</option>
 </select>

编辑名称时，在AngularJS

1 个答案: