CODEWITHSUNDEEP
angularjsionic-framework
distante
distante

Reputation: 7025

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.

Update 2

To fix this problem with the vales between the view and the model I needed to create a empty object in the $scope.search= and put all my view variables there 

    $scope.searchText = 'dummy text';
    $scope.search.searchFromDate = new Date();
    $scope.search.searchToDate = $scope.searchFromDate;
    $scope.search.searchCategory = 'dummy category';

and then use $watch with those variables.

Upvotes: 1

Views: 107

Answers (1)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41445

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 ");
        }

    };

Upvotes: 1

Related Questions