Problems with ng-model

Question

I have an app with 3 tabs every tabs load own template from external file. Problems that ng-model from first tab do not send to third tab.

First file:

<div class="row">
  <div class="span2 text-right">*Reported By:</div>
  <div class="span2"><input type="text" ng-model="date" required></div>
  <div class="span2 text-right">*Well Number:</div>
  <div class="span2">
    <select ng-model="well" required ng-change="wellFunc(well)" required>
      <option ng-selected>Well-01</option>
      <option>Well-02</option>
      <option>Well-03</option>
    </select>
  </div>
</div>

Second:

<table class="table table-hover table-striped">
  <tr>
    <th><strong>General Information:</strong></th>
  </tr>
  <tr>
    <td  ng-model="date"></td>
  </tr>
</table>

Also I use ui-router, maybe problem in router?

var myApp = angular.module('myApp', ["ui.router"])
myApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/re");
$stateProvider
.state('re', {
  url: "/re",
  templateUrl: "template/general.html"
})
.state('ro', {
  url: "/ro",
  templateUrl: "template/corrective.html"
})
.state('ri', {
  url: "/ri",
  templateUrl: "template/result.html"
})

});

score 0 · Accepted Answer · answered Mar 12 '14 at 02:43

0

I would need to see your controller to confirm, but you are likely clobbering your date. In your controller, I am assuming you have something like

$scope.date = "03/11/2014";

Instead, do something like this

$scope.foo = { "date":"03/11/2014"}

and update your html to

<input type="text" ng-model="foo.date" required>

Now when the user updates the input, it won't clobber the other "date" reference, but instead just update the date property of the foo reference. Checkout this quick video for an explanation. https://egghead.io/lessons/angularjs-the-dot

answered Mar 12 '14 at 02:43

ken4z

1,340
1
11
18

Thank's it helped. But I have another problem. On date I have datepicker. When I clicked date in datepicker date do not send again but if I edit input value everything ok. – user2971752 Mar 12 '14 at 12:18
This should be a separate question so it can benefit others. Include your source code and the datepicker you are using. My guess though, is that the datepicker is not an angular directive, so the event is happening outside the Angular world and it is not aware of the value change. Check out http://stackoverflow.com/questions/15112584/using-scope-watch-and-scope-apply – ken4z Mar 12 '14 at 12:30
Here is an explanation of $scope.$apply() that also might help. http://jimhoskins.com/2012/12/17/angularjs-and-apply.html – ken4z Mar 12 '14 at 12:57

Problems with ng-model

1 Answers1