使用帶有JSON對象不起作用的ng選項

我試圖帶一個對象並有一個<select>，它使用鍵值對分配<option>的值和標籤。出於某種原因，它沒有正確顯示。使用帶有JSON對象不起作用的ng選項

我有這樣的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作爲選項標籤。

UPDATE

其實我只是意識到角不使用與NG-模型中的價值。我在$scope上的模型顯示了正確的值，但DOM沒有顯示我認爲會顯示的內容。該網頁實際上應該做工精細的話，只是奇怪的是，角不在DOM

來源

2014-09-03 Matt Hintzke

HTTP表明這一點：/ /plnkr.co/edit/gLETB1HHMry4lKrWmFjQ?p=preview是你需要的嗎？ – sylwester 2014-09-03 21:02:17

這將做

腳本

$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>

來源

2014-09-03 22:08:49 allenhwkim

使用帶有JSON對象不起作用的ng選項

回答

相關問題