Question

我正在尝试获取一个对象并使用<select>使用键值对来分配<option> s的值和标签。由于某种原因，它没有正确显示。

我有这个JSON对象：

$scope.ServerData = {
            'HostedExchange': {
                'Exchange EWS (Exchange2007+)': 'EWS',
                'Exchange WebDAV (Exchange2003)': 'Webdav',
                'IMAP': 'Imap',
                'POP': 'Pop',
                'ActiveSync': 'ActiveSync'
            },
            'OnPremiseExchange': {
                'Exchange EWS (Exchange2007+)': 'EWS',
                'Exchange WebDAV (Exchange2003)': 'Webdav',
                'IMAP': 'Imap',
                'POP': 'Pop',
                'ActiveSync': 'ActiveSync'
            },
            'Google': {
                'IMAP': 'Imap'
            },
            'HostedMail': {
                'Exchange EWS (Exchange2007+)': 'EWS',
                'Exchange WebDAV (Exchange2003)': 'Webdav',
                'IMAP': 'Imap',
                'POP': 'Pop',
                'ActiveSync': 'ActiveSync'
            },
            'LotusNotes': {
                'IMAP': 'Imap',
                'POP': 'Pop',
                'Notes Traveler (ActiveSync)': 'ActiveSync'
            },
            'ConnectWise': {
                'IMAP': 'Imap',
                'POP': 'Pop'
            },
            'CommuniGate': {
                'IMAP': 'Imap',
                'POP': 'Pop',
                'AirSync': 'ActiveSync'
            },
            'Zimbra': {
                'IMAP': 'Imap',
                'POP': 'Pop',
                'ActiveSync': 'ActiveSync'
            },
            'Other': {
                'Exchange EWS (Exchange2007+)': 'EWS',
                'Exchange WebDAV (Exchange2003)': 'Webdav',
                'IMAP': 'Imap',
                'POP': 'Pop',
                'ActiveSync': 'ActiveSync'
            }
        }

我们使用另一个<select>来选择此对象的key，然后查找用于第二个<select>的对象。那部分工作正常。这是HTML

<li>
                     <label>Email system</label>
                     <select name="EmailSystemType" ng-model="model.EmailSystemType">
                         <option value="">select a system</option>
                         <option value="HostedExchange">Hosted Exchange</option>
                         <option value="OnPremiseExchange">On Premise Exchange</option>
                         <option value="Google">Google</option>
                         <option value="HostedMail">Hosted Mail (e.g. Go Daddy)</option>
                         <option value="LotusNotes">Lotus Notes</option>
                         <option value="ConnectWise">ConnectWise</option>
                         <option value="CommuniGate">CommuniGate</option>
                         <option value="Zimbra">Zimbra</option>
                         <option value="Other">Other</option>
                    </select>


                 </li>
                 <li>
                     <label>Protocol</label>
                     <select name="Protocol" ng-model="model.EmailSystemProtocol" ng-options="v as k for (k, v) in ServerData[model.EmailSystemType]">
                         <option value="">select a system above</option>
                     </select>

                 </li>

问题是DOM显示<option>值与标签相同，后者是这些对象的key。相反，我希望key是选项值，value是选项标签。

更新

实际上我刚刚意识到Angular并没有将这个值与ng-model一起使用。 $scope上的我的模型显示正确的值，但DOM没有显示我认为它会显示的内容。该页面实际上应该工作正常，只是奇怪，Angular没有在DOM中显示这个

Answer 1

这样做

脚本

  $scope.titleize = function(txt) {
    return txt.replace(/[a-z][A-Z]/g, function(s) {return s[0]+' '+s[1]});
  };

HTML

<select ng-model="foo" 
  ng-options="key as titleize(key) for (key , value) in ServerData">
  <option value="">select a system</option>
</select>

使用ng-options和JSON对象不起作用

1 个答案: