Can't seem to get ng-model to work in this instance
Question
<div class="col-lg-3">
<input type="text" id="hourHours" ng-model="hourHours" class="form-control" style="width: 60px" placeholder="hh" />
</div>
<button type="button" class="btn" ng-click="addSubscriptionModel()">submit</button>
Here's my simple html code with my ng-model. If I type in 5 into the input, the angular code should console.log out 5 but it's still undefined...
var SomeController = function ($scope, $modalInstance) {
$scope.addSubscriptionModel = function () {
console.log($scope.hourHours);
}
});
EDIT: ACTUAL CODE... seems like I forgot to mention that I'm using tabset which might be why it's not working...
<tabset>
<tab heading="Hour" select="hourOption()" ng-model="hour">
<div class="col-lg-3">
<input type="text" id="hourHours" ng-model="hourHours" class="form-control" style="width: 60px" placeholder="hh" />
</div>
</tab>
</tabset>
4 answers
solution1
2 2015-06-04 04:58:50
Finally figured it out... Clear the ng-model asssociated to textarea inside Angular Bootstrap UI tabset form an outside button
Jeffrey A Gochin had the right idea... I did need to set "values" for my two objects inside my controller.
$scope.hour = {
hours: "",
minutes: ""
};
Then in my button function, I could access the $scope.hour and it works.
solution2
1 ACCPTED 2015-06-04 04:45:37
Not quite seeing enough detail here, but when your page loads and populates from a data source you typically need to set the properties on the model [scope] to initialize your page. In short what your are doing is a two way binding. So if you expect your page to be populated for before displaying then in your controller you need to set the values on the scope when the controller is executed. After your enter new data into your page the scope (or model), it will automatically be updated with the on screen values.
UPDATE
As a follow up. I have learned the judicious use of $compile and $interpolate can go a long way to solving problems like. They allow you to perform late bindings to the scope. Also, while I still don't quite understand it fully understand when to use it, transclusion can also be helpful.
solution3
0 2015-06-04 04:22:51
Look at this code its working , check your console window
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="col-lg-3">
<input type="text" id="hourHours" ng-model="hourHours" class="form-control" style="width: 60px" placeholder="hh" />
</div>
<button type="button" class="btn" ng-click="addSubscriptionModel()">submit</button>
</body>
</html>
<script>
var app = angular.module('app',[]);
app.controller('MyCtrl', function($scope){
$scope.addSubscriptionModel = function () {
console.log($scope.hourHours);
}
});
</script>
solution4
0 2015-06-04 05:04:43
Something with transclusion and $compile. I solved it by just including my form-ish content in the div tags rather than trying to dynamically load them. You can read through the tabs code, and google the issue. There is no current fix other than the hack I described.
The crux of the problem is the need to $compile the tab content after it loads, but the current version of the tabs does not work properly. There is some recursion issue that causes a stack overflow under the wrong conditions. There is an open issue on Git about it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.