【问题标题】:ng-model value is not getting passed through ng-repeatng-model 值没有通过 ng-repeat
【发布时间】:2016-09-23 20:57:28
【问题描述】:

我正在尝试使用自定义过滤器来过滤日期范围,并保留用于从 popver 中获取用户日期的文本字段。它不起作用,而我有另一个文本框可以在标题栏中获取名称,并且能够获取 ng-repeat 中的值作为默认过滤器。

我错过了什么?

Popver 中的日期字段

不在任何控制器下,在popver中

  <label class=" item-input">
    <span class="input-label" style="width:50%;font-size:14px;">From Date</span>
    <input type="text" ng-model="fromDate"/>
  </label>

HTML - ng-repeat

    <div ng-repeat="item in Items | filter: custname |  filter: applyDateFilter(fromDate, toDate)">
        <div class="row item wrap">
          <div class="col col-95">
            <ion-checkbox ng-model="item.Selected">
              <div class="row">
                <div class="col col-67">
                  <p>{{item.name}}</p>
                </div>
                <div class="col col-33 right">
                  <p>{{item.order_date | datetimeFormat }}</p>
                </div>
              </div>
            </ion-checkbox>
          </div>
        </div> 
      </div>

过滤器

 .controller("dbController", function($scope, $rootScope) {
     $scope.applyDateFilter = function(from, to) {
        return function(items, from, to) {
            console.log(items);
            console.log('from '+from);
            console.log('to '+to);
            console.log('fromDate '+$scope.fromDate);
            console.log('toDate '+toDate);

            var result = [];   

            if(from == 0 && to == 0)
              return items;

            if(from != '' && to != ''){
              var df = parseDate(from);
              var dt = parseDate(to);

              for (var i=0; i<items.length; i++){
                  var tf = new Date(items[i].order_date * 1000);
                  if (tf >= df && tf <= dt)  {
                      result.push(items[i]);
                  }
              }
            }            
            return result;
        };
      }; 
  });

也尝试使用过滤器传递类似 datetime:fromDate:toDate

.filter('datetime', function($filter){
   return function(items, fromDate, toDate){ 
        from = fromDate;
        to = toDate;
        var result = []; 
        if(from == 0 && to == 0)
          return items;
        if(from != '' && to != ''){
          var df = parseDate(from);
          var dt = parseDate(to);
          for (var i=0; i<items.length; i++){
              var tf = new Date(items[i].order_date * 1000);
              if (tf >= df && tf <= dt)  {
                  result.push(items[i]);
              }
          }
        }            
        return result;
    };
});

【问题讨论】:

  • 提供一个小提琴来检查你的流程。
  • 您是如何打开弹出框的?你在使用 ui-bootstrap 吗?

标签: javascript angularjs ionic-framework angularjs-filter


【解决方案1】:

弹出框可能正在创建不同的范围,因此您的 ng-model 正在注册到不同的范围。

试试这个解决方案:

创建一个全局控制器并将其应用于 &lt;html&gt;&lt;body&gt; 并在其中放入类似的内容 (&lt;body ng-controller="GlobalController"&gt;):

myApp.controller('GlobalController', function($scope, $rootScope) {
    $rootScope.globalModels = {};
    // Or use below if you are using ui-bootstrap
    // $scope.globalModels = {};
});

现在,改变你的看法:

<label class=" item-input">
    <span class="input-label">From Date</span>
    <input type="text" ng-model="globalModels.fromDate"/>
</label>

现在,当将它传递给ng-repeat 中的过滤器时,传递globalModels.fromDate 而不仅仅是fromDate。对toDate 执行相同操作。

【讨论】:

  • 抱歉回复晚了,我正在使用离子。我在 $rootScope 和 $scope 中都试过了,但还是一样。获取 fromDate 为未定义,toDate 为 ''。尝试更改名称也没有用。还尝试将元素直接移动到标题而不是弹出窗口,没有运气。