Question

我有这两个功能，

function functionCall(orderByRelease_date){
  orderByClick = "release_date"
  orderBy();
  console.log ('release')
}

function functionCall(orderByCreated_at){
  orderByClick = "created_at"
  orderBy();
  console.log ('created')
}

这些函数为此函数设置变量orderByClick，

var orderBy = function(){
  $scope.movies = response.data;
  var orderBy = $filter('orderBy');
  $scope.orderedMovies = orderBy($scope.movies, orderByClick);

  var movies = $scope.orderedMovies
  var i,j,temparray,chunk = 8, movieGroups=[];
  for (i=0,j=movies.length; i<j; i+=chunk) {
      temparray = movies.slice(i,i+chunk);
      movieGroups.push(temparray);
  }
  $scope.movieGroupsSuggestions = movieGroups
}

我创建了一个这样的选项列表，

%select
  %option{:onselect => "functionCall(orderByRelease_date)"} Sort by release date.
  %option{:onselect => "functionCall(orderByCreated_at)"} Sort by newest

但它似乎没有做任何事情。

所以我偶然发现了ngoptions，这似乎是要走的路，但是我不清楚如何使用它来实现功能。

我用选项

创建了一个范围

$scope.orderList = [
  'created_at',
  'release_date'
]

和ng-options元素，

%select{"ng-options" => "option for option in orderList"}

这会显示orderList中的值，但是如何将其挂起以使oderByClick函数中的变量orderBy发生变化？

Answer 1

回答我自己的问题，

我创建了一个范围，其中包含我想在我的javascript代码中插入的值，

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='hlslidein_place_holder' style='display:none'/>
</b:if>
    <b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='hlslidein_place_holder'></div>
</b:if>

然后创建一个对ng-options做出反应的函数

$scope.listOfOptions = [
  'release_date',
  'created_at',
];

因此，这会将listOfOptions中的值设置为变量orderByClick，然后调用orderBy函数。

然后在oderBy函数中，

$scope.selectedItemChanged = function(){
  orderByClick = $scope.selectedItem;
  orderBy();
}

这就是haml，

$scope.orderedMovies = orderBy($scope.movies, orderByClick);

我的问题是不知道%select{"ng-change" => "selectedItemChanged()", "ng-model" => "selectedItem", "ng-options" => "option for option in listOfOptions"}，这就是在控制器和视图之间创建交互的原因。

如何使用ngOptions函数？

1 个答案: