javascript - 使用 ng-model 通过 ng-repeat 和 ng-options 标记下拉列表中的选定项目

Question

我想要实现的是在行中打印有关服务器和在该服务器上授予的权限的信息。为此，我使用数组 displayServers 来存储可以选择的服务器数组，并且在 ng-repeat 的每次迭代中，我正在使用这些服务器创建一个下拉列表。我还希望在每次迭代中用 ng-model 标记选定的服务器，该服务器对应于存储有关服务器的信息和授予的相应权限的 JS 对象。

存储服务器和权限信息的对象如下所示:

var modalUser = {
       Permissions: {
            server1: ['admin', 'developer'],
            server2: ['developer'],
            serverN: ['permissionN'] 
       }
}

var displayServers = [
     ['server1', 'server2', 'serverN'],
     ['server1', 'server2', 'serverN']   
]

HTML 看起来像这样

   <tr ng-repeat="serverArray in displayServers track by $index" ng-if="server[0] != 'removed'">
        <td class="col-md-2">
        <div style="margin-top: 8px" >
            <select class="selectpicker server"
                    ng-options="serverName as serverName for serverName in serverArray track by serverName"
                    ng-model="modalUser.Permissions[serverName]">
            <option style="display: none" value="">Select server</option>
            </select>
        </div>
        </td>

Answer 1

在我看来，您可以将 ng-model 设置为简单属性，然后在 ng-change 上调用一个函数来执行逻辑，即通过代码设置“modalUser.Permissions[serverName]”。

希望对您有所帮助!

已更新

    $scope.checkIfPresentInPermissions = funtions(serverName){
    // logic to check if server name is present in modalUser.Permissions[serverName]
    };



      <tr ng-repeat="serverArray in displayServers track by $index" ng-if="server[0] != 'removed'">
        <td class="col-md-2">
        <div style="margin-top: 8px" >
            <select class="selectpicker server"                   
                    ng-model="modalUser.SelectedServer">
            <option style="display: none" value="">Select server</option>

<option  ng-repeat="serverName as serverName for serverName in serverArray track by serverName" value="{{serverName }}" selected="checkIfPresentInPermissions(serverName)" >{{serverName }}</option>

            </select>
        </div>
        </td>