2015-02-10 124 views
1

的角度控制器我有以下的填寫範圍變量:從隱藏的輸入值

application.controller('ImageController', function ImageController($scope, ImageService) { 

    $scope.model = { 
    images: [], 
    multiple: false 
    } 

    $scope.$watch('model.multiple', function (newVal, oldVal) { 
    console.log(newVal); 
    console.log(oldVal); 
    }); 

} 

我需要從一個隱藏的輸入獲得$ scope.model.multiple值。

隱藏的輸入值從服務器端填充。所以測試我有:

<input type="hidden" data-ng-model="model.multiple" data-ng-value="true" /> 

當我運行我的代碼newVal和oldVal都是false ...爲什麼?

+0

什麼呢這樣設置

application.controller('ImageController', function ImageController($scope, $window, ImageService) { $scope.model = { images: [], multiple: $window.model.multiple } 

值'數據-ng-model =「model.multiple」'輸出? – 2015-02-10 13:26:52

+0

newVal和oldValue都未定義 – 2015-02-10 13:45:12

回答

0

我不認爲ngValue做你認爲它的作用。它是用於選項(在選擇)和單選按鈕。 See docs here

簡短的回答:在$範圍$表中的值是假的,因爲你在控制器$ scope.model.multiple設置爲false,在視圖中隱藏的輸入沒有得到綁定到模型你希望它會。

在你的代碼中,我認爲你正在試圖在你的視圖中設置model.multiple的值,無論如何也不可能。

這是我的意見,你應該在控制器中設置值爲true。我看不出有什麼理由需要在隱藏輸入中處理它。你提到它來自「服務器」,但視圖是由AngularJS渲染的 - 而不是其他服務器。

對輸入進行雙向綁定的目的是讓用戶編輯將會反映在您的模型中。由於它們不是用戶可編輯的,因此對隱藏的輸入沒有任何綁定。隱藏的輸入意味着表單提交,而Angular不會那樣做。表格在Angular中有不同的用途。

看看這個plunk看看hidden inputs don't impact the model。查看:

<body ng-controller="MainCtrl"> 
    <input type="hidden" ng-model="model.multiple" ng-value="true" value="true" /> 
    <input type="hidden" ng-model="model.test" />Hidden inputs have no impact on the model. 
    <br>That's why this is blank: '{{model.test}}' 
</body> 

控制器:

app.controller('MainCtrl', function($scope) { 
    $scope.model = { 
    images: [], 
    multiple: false 
    } 

    $scope.$watch('model.multiple', function(newVal, oldVal) { 
    console.log('New: ' + newVal); 
    console.log('Old: ' + oldVal); 
    }); 
}); 
+0

我試過了,newVal和oldVal都未定義 – 2015-02-10 13:44:38

+0

我將它們視爲false仍未定義。仍然在努力,雖然...... – 2015-02-10 13:47:54

+0

@MiguelMoura我已經完全更新了答案。看起來你不能通過隱藏的輸入來影響模型,我想這不是你想要的或者應該做的。 – 2015-02-10 14:03:50

0

相反ngValue指令,你可以使用ngInit directive.Here是你如何能做到這一點。

ng-init="model.multiple=true"

+0

Angular文檔不推薦使用ngInit:https://docs.angularjs.org/api/ng/directive/ngInit – 2015-02-10 15:51:26

1

如果你填入一輸入隱藏服務器端的價值,並希望它成爲角可用,做到這一點無論是在角的方式,用裝載值,或者,如果一個JSON您沒有訪問到後端,或者如果你不想改變你的代碼很多,呈現模板與ID,如:

<input type='hidden' id='hiddenValue' value='xx(server-side)xx'> 

,然後控制器把喜歡的東西里面:

$scope.value = document.getElementById('hiddenValue'); 
+0

剛剛遇到了這種情況。這個解決方案非常簡單,我忽略了它。 – TrippRitter 2015-03-16 14:59:58