在我的HTML頁面中,我設置的輸入文本框值不是通過鍵入,而是通過JavaScript,然後當我使用AngularJS內部獲取該值時使用範圍控制器,那麼它顯示未定義....輸入文本框的ng-model值在angularjs控制器中未定義,當通過javascript動態設置時
下面是我的代碼: - >
<!DOCTYPE html>
<html lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form id="someForm" name="someForm">
First Name: <input type="text" id="fname" ng-model="user.firstname" ng-model-options="{updateOn: 'change'}" />
Last Name: <input type="text" id="lname" ng-model="user.lastname" ng-model-options="{updateOn: 'change'}" />
<input id="getUser" type="submit" ng-click="getUserName(user)" value="Get User" />
<button ng-click="resetForm(user)">RESET</button>
</form>
</div>
<script>
$('#getUser').on('click', function(){
//$("getUser").on('click', function(){
//alert("First Name "+$("#fname").val());
$("#lname").val($("#fname").val());
alert("Last Name set to "+$("#lname").val());
// });
});
</script>
<script>
//angular.element(document).ready(function() {});
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.getUserName = function(user)
{
alert("Last Name in Angular Controller: "+$scope.user.lastname)
}
$scope.resetForm = function(user) {
//Even when you use form = {} it does not work
angular.copy({},user);
}
});
</script>
</body>
</html>
點擊獲取用戶按鈕後,第一姓氏字段的值是通過JQuery的設置,則AngularJS控制器在ng-model中未定義的值被調用。我無法理解這一點。這種類型的場景的解決方案或變通方法是什麼,其中輸入文本字段值是通過JavaScript或JQuery動態設置的,並使用AngularJS模型和控制器獲取和使用。
你試試我的答案? –
是的,但仍然沒有定義。看到我下面的評論.. – srikit2014