distante distante - 2 months ago 32
AngularJS Question

Value from view doesn't update on model (angularjs - ionic 1.3.1)

I have this view

<ion-view>


<ion-content class="search-view has-footer">
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Search</span>
<input type="text" placeholder="Search" ng-model="searchText">
</label>

<label class="item item-input item-stacked-label">
<span class="input-label">From</span>
<input type=date placeholder="Date" ng-model="searchFromDate" ng-change="checkToDate()">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">To</span>
<input type="date" placeholder="Date" ng-model="searchToDate">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Cat</span>
<input type="text" placeholder="Cat" ng-model="searchCategory">
</label>
</div>

</ion-content>


<div class="search-bottom-buttons">
<button class="button button-calm button-full search">
Suche
</button>
<button class="button button-assertive button-full reset" ng-click="resetSearch()">
Zur├╝cksetzen
</button>
</div>


</div>




With this controller:

dateModule.controller('dateController', ['$scope', function($scope) {
$scope.searchText = 'dummy text';
$scope.searchFromDate = new Date();
$scope.searchToDate = $scope.searchFromDate;
$scope.searchCategory = 'dummy category';


//check that the To date is always >= From date

$scope.checkToDate = function() {
console.log("$scope.searchFromDate: " + $scope.searchFromDate);
console.log("$scope.searchToDate: " + $scope.searchToDate);
if ($scope.searchFromDate.getTime() < $scope.searchToDate.getTime()) {
console.log("From Date is LESS than TO date ");
} else if ($scope.searchFromDate.getTime() == $scope.searchToDate.getTime()) {
console.log("From Date is EQUAL than TO date ");
} else {
console.log("From Date is HIGHER than TO date ");
}

};
}])


I'm trying to check if the two
date inputs
are the same, or if the first is higher but I can't do it because the model variables
$scope.searchFromDate
and
$scope.searchToDate
are always the same, doesn't matter what I choose on the view.

The only way can made it work is creating a function for each value in this way:

$scope.replaceMe = function (value) {
$scope.searchFromDate = value;
console.log("$scope.searchFromDate: " + $scope.searchFromDate);
};


But creating a value for update each var isn't the best way to do it, I think.

I added a
watcher
to that variables with a simple
console.log("I Have Changed");
and I notice that it run just once on load and never when I change the value in the view.

What I'm doing wrong?

Update

Thanks to @it13122256-ranawaka-r-a-s-m my function now works sending the view variables as parameters, but I still have no idea why the model doesn't update when the variables changes on the view.

Answer

maybe you can try to pass the 2 dates as parameters to checkToDate function

<label class="item item-input item-stacked-label">
     <span class="input-label">From</span>
     <input type=date placeholder="Date" ng-model="searchFromDate"  ng-change="checkToDate(searchFromDate,searchToDate)">
</label>



$scope.checkToDate = function(searchFromDate,searchFromDate) {
        console.log("searchFromDate: " + searchFromDate);
        console.log("searchToDate: " + searchToDate);
        if (searchFromDate.getTime() < searchToDate.getTime()) {
            console.log("From Date is LESS than TO date ");
        } else if (searchFromDate.getTime() == searchToDate.getTime()) {
            console.log("From Date is EQUAL than TO date ");
        } else {
            console.log("From Date is HIGHER than TO date ");
        }

    };
Comments