2013-03-23 64 views
0

我正在學習AngularJS,並且對於select元素的數據綁定有一個問題。數據綁定的文本框沒有任何事件處理代碼。一旦ng-model屬性被設置,textbox會在模型屬性更改時更新,反之亦然。不需要ng-change屬性。AngularJS不一致的數據綁定

但是,對於select元素,我們需要編寫將通過ng-change atribute調用的函數。

爲什麼angularjs手柄綁定沒有NG-改變屬性的文本框,但要求將通過NG-改變屬性被要求選擇要素的功能呢?

UPDATE: 添加在評論部分的小提琴。這個例子來自AngularJS in Action書。點擊其中一個故事,更改文本框的值並更新模型。更改下拉模式中的選擇不會更新。

UPDATE: 添加在評論一個新的小提琴。

謝謝。

+0

你盡顯通過硬編碼''

+0

這裏是小提琴:HTTP://jsfiddle.net/a5SUS/32/ – Alper 2013-03-25 03:11:35

+0

使用瀏覽器控制檯會看到錯誤'typesIndex是undefined'。你在一個函數中使用它,但沒有在任何地方定義 – charlietfl 2013-03-26 21:26:06

回答

1

我已經創建了一個工作here小提琴 - 這個問題真的只是虛此數據。在原始的小提琴中,在{name:'Back Log'}和{name:'To Do'}的狀態數組中創建的對象與{name:'Back Log'}不一樣(不是===)和{名稱:'待辦事項}}在虛擬故事對象中創建的對象。

爲了使示例工作,我將索引狀態傳遞給getStories函數。不過,我認爲這實際上只是演示引起的混淆。 (我一直在尋找的MEAP在行動角,以及,我認爲它可以簡化一點like this one,使用簡單的字符串的狀態,將通過===測試

var getStories = function(statusesIndex) { 
    var tempArray = [ 
     {title:'Story 00', 
     description:'Description pending.', 
     status: statusesIndex['To Do'] 
     }, 
     {title:'Story 01', 
     description:'Description pending.', 
     status: statusesIndex['Back Log'] 
     } 
]; 
    return tempArray; 
} 
0

如果我理解你的問題正確,則我認爲你的猜測是錯誤的,因爲對於選擇框,你不必爲了獲取所選擇的選項調用NG-change事件。

<select ng-model='select'> 
    <option>....</option> 
    <option value='one'>One</option> 
    <option value='Two'>Two</option> 
</select> 

// Your selected option will print below... without invoking ng-change 
<div>You selected: {{select}}</div> 

演示:http://jsfiddle.net/jenxu/1/

+0

當我改變選定的選項時,改變不會反映在模型中。 – Alper 2013-03-23 14:30:50

+0

@Alper演示答案。創建您自己的演示,複製問題 – charlietfl 2013-03-23 14:34:07

+0

@charlietfl演示創建。 – Alper 2013-03-26 18:07:46

1

我覺得你的困惑可能的select documentation仍然不正確的結果。 (請參閱我的Disqus comment。)ng-model可以並且應該與select一起使用。 ng-change是可選的,如果每次選定選項更改時都想要執行某些操作,它只會爲您提供掛鉤。

通常你應該使用ng-options加上select。

+0

如果沒有ng-change,我無法獲得雙向綁定。看到我上面的評論和相關的小提琴。 – Alper 2013-03-28 03:14:55