视图中的值不会在模型上更新(angularjs - ionic 1.3.1)

时间:2016-09-12 10:29:09

标签: angularjs ionic-framework

我有这个观点

<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>

使用此控制器:

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

    };
}])

我正在尝试检查两个date inputs是否相同,或者第一个是否更高但我不能这样做,因为模型变量$scope.searchFromDate$scope.searchToDate是总是一样的,无论我在视图中选择什么都没关系。

唯一可行的方法是以这种方式为每个值创建一个函数:

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

但我认为,为每个var创建一个更新值并不是最好的方法。

我使用简单的watcher为这些变量添加了console.log("I Have Changed");,我注意到它在加载时只运行一次,而且从来没有在视图中更改值。

我做错了什么?

更新

感谢@ it13122256-ranawaka-r-a-s-m我的函数现在正常sending the view variables as parameters,但我仍然不知道为什么在视图中变量发生变化时模型不会更新。

更新2

要解决视图和模型之间的vales问题,我需要在$scope.search=中创建一个空对象并将所有视图变量放在那里

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

然后将$watch与这些变量一起使用。

1 个答案:

答案 0 :(得分:1)

也许您可以尝试将2个日期作为参数传递给 checkToDate 功能

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

    };