設置爲輸入$ scope.myObjectVariable值屬性值

晚上好，

我使用AngularJS編寫一個應用程序，我需要爲應用程序與POST請求的服務器的NodeJS發送數據。

我的數據結構像一個json對象，並且它具有數據綁定感謝AngularJS框架。

截至目前，一個函數正在動態地嘗試創建用戶可能喜歡的一些input標籤內的可能值。一個例子：

<button ng-click="generateFoodAndBeverages(row)>Generate</button> 
<input type="text" ng-model="row.service.day.beverage" placeholder="beverage" /> 
<input type="text" ng-model="row.service.day.food" placeholder="food" />

的兩個輸入值可以由用戶通過在鍵入值來設定他們想（例如，「可樂」，「漢堡」），但上面的輸入標籤是一個按鈕，可以爲用戶生成輸入值。

生成值的函數從數組中獲取它們，然後在函數結尾返回兩個可能的值，一個用於飲料，一個用於食物。

當它有兩個返回值它改變了兩個輸入屬性值，將它們設置爲通過函數產生的兩種可能性：

jQuery("#input1").attr("value", generateFoodAndBeverages(row)[0]); 
jQuery("#input2").attr("value", generateFoodAndBeverages(row)[1]);

這是不完美的，也不優雅，但它的工作。每次用戶請求自動生成食物和飲料時，該函數都會填充並動態更改這兩個輸入元素的值屬性，以便實際設置值並確實存在。即使如此，即使我在屏幕上將它們看作輸入字段內的文本，我的POST請求也不會識別ng模型實際發生更改的事實。 ng-model將更改註冊到輸入字段的value屬性的唯一方法是如果用戶使用鍵盤輸入內容，則手動更改value屬性。另一個例子：

<input type="text" value="generateValue()" ng-model="row.service.info" />

這裏的一個根本不改變ng模型的值。

<input type="text" value="User Typed Value" ng-model="row.service.info" />

這另一種代替確實改變了NG-模型價值和它的變化和存在，它被傳遞到以後可以作爲一個POST請求到服務器發送的$範圍。

有關爲什麼輸入字段的「自動和動態生成」值在用戶類型值沒有被ng模型註冊時有何想法？

在此先感謝！

[編輯]

顯然，問題就來了與ng-model不改變。我試圖通過在輸入中應用ng-change來調試該問題。如果更改是通過javascript完成的，則它不會被註冊到ng-model，並且ng-change函數不會觸發，因爲即使我可以清楚地看到javascript爲輸入標記設置的新值，ng-model也沒有更改。如果我手動更改輸入標記的值，則觸發ng-change，並且控制檯記錄更改。

如果每行都沒有那麼不同，我可以直接將這些更改應用於ng-model。

具有NG-模式是這樣的：

<input ng-model="row.serviceInfo.DayObject[dayString].food" /> 
<input ng-model="row.serviceInfo.DayObject[dayString].beverage" />

我如何將能夠直接應用這些變化給定的模型是如何動態是NG-模型。作爲一個例子，我可以有1000行，每行都有自己的serviceInfo對象。我不知道如何使用動態生成的值爲每個行更改模型。

[編輯]

的問題確實有NG-模式不改變。該解決方案包括將更改應用於動態生成的值函數內的每個元素的ng模型。感謝大家的意見。如果有人遇到同樣的問題，我會在這裏留下這段代碼！再次感謝！

 let foodEl = angular.element(the row element food input); 
     let beverageEl = angular.element(the row element beverage input); 

     $scope.displayedCollection[i].serviceInfo = { 
     "day" : { 
      "food" : generatedValuesFood(el, day), 
      "beverage" : generatedValuesBeverage(el, day) 
     } 
     }; 

     foodEl.val($scope.displayedCollection[i].serviceInfo.day.food); 
     beverageEl.val($scope.displayedCollection[i].serviceInfo.day.beverage);

來源

2017-03-08 mnemosdev

嗨，儘量簡化這裏的東西 – digit

您的代碼似乎有點複雜，所以很難確保（也許你可以創建一個蹩腳的最低限度？），但解釋似乎是因爲你正在使用jQuery進行更改。我的理論是，你使用「.attr」，也許你應該使用「.prop」來實際改變財產的價值，但即使如此，我不知道它會起作用。無論如何，我不會爲了這個特定的目的混合使用Angular和jQuery，你應該嘗試在任何地方使用Angular綁定。 – ssougnez

你說得對，我在jQuery部分使用.attr來更改輸入元素的值，並且該值在函數生成時未在ng模型綁定中註冊。 – mnemosdev

我覺得你的問題很簡單。正如@ssougnez所說，不要將jquery和angularjs混合使用。 Angularjs使用數據綁定概念，不要使用jquery樣式來改變輸入值，而是使用ng-model指令將數據從模型綁定到HTML控件（input，select，textarea）上的視圖。在您的generateFoodAndBeverages功能，根據該行的如剛剛成立的NG-模型值：

var generateFoodAndBeverages = function() { 
    $scope.row.service.day.beverage = array[0]; 
    $scope.row.service.day.food = array[1]; 
};

來源

2017-03-08 15:37:14 digit

謝謝，這個答案幫助我以自己的方式解決問題：D – mnemosdev

設置爲輸入$ scope.myObjectVariable值屬性值

回答

相關問題