angularjs 如何替换一个已排序的JS数组中的值?

cfh9epnr  于 2023-10-15  发布在  Angular
关注(0)|答案(2)|浏览(128)

我有一个按日期排序的数组集合。在这些数组中,有一个值date,这个日期是我的HTML视图中的一个标题。有时我可以有多个数组具有相同的date值,这是我不想要的。
我想做的是,直接在集合中找到并替换相同的date值。或者在我的HTML视图中添加一个AngularJS参数,以便只运行一次相同的日期值(例如,ng-如果有什么)。
其基本思想是将具有相同日期的“用户”分组在一个唯一的日期标题下。
我试过了,但还是没有成功:

//Arr is fill up in this function and sort by date after, it is a 
$scope Array.  snapshot is from a firebase request and contains all 
values needed to fill up Arr. This deleDouble() function is called in 
a loop. Just right after there is a sort() function.

$scope.deleteDouble = function(Arr, snapshot)
{

var tmp = Arr;

// Algo 1 : infinite loop

for(var i = 0; i < tmp.length; i++)
{
    if(tmp.indexOf(snapshot.date) === -1)
    {
        console.log("IF DATE ALREADY EXISTS");
        $scope.Arr.push({date : '', name : snapshot.name, adress : snapshot.adress});
    }
    else if(tmp.indexOf(snapshot.date) > -1)
    {
        console.log("IF DATE FIRST TIME");
        $scope.Arr.push({date : snapshot.date, name : snapshot.name, adress : snapshot.adress});
    }
}

}

// Algo 2 : is not working

tmp.reduce(function(acc, el, i, arr) 
{
  if (arr.indexOf(el) !== i && acc.indexOf(el) < 0) 
        console.log("IF DATE ALREADY EXISTS");
        $scope.Arr.push({date : '', name : snapshot.name, adress : snapshot.adress});
    else{
        console.log("IF DATE FIRST TIME");
        $scope.Arr.push({date : snapshot.date, name : snapshot.name, adress : snapshot.adress});
    }
}, []);

// Algo 3 : same result : nothing !

tmp.reduce(function(dupes, val, i) 
{
    if (tmp.indexOf(val) !== i && dupes.indexOf(val) === -1) 
    {
       console.log("IF DATE ALREADY EXISTS");
       $scope.Arr.push({date : '', name : snapshot.name, adress : snapshot.adress});
    }
    else
    {
       console.log("IF DATE FIRST TIME");
       $scope.Arr.push({date : snapshot.date, name : snapshot.name, adress : snapshot.adress});
    }
}, []);
<div ng-repeat="u in users">
     
     <h3 style="color:#2C33BE;">{{u.date}}</h3>
           
        <ion-item>
             <div class="item-u">{{u.name}}</div>
             <div class="item-u">{{u.adress}}</div>
        </ion-item>
</div>
bwitn5fc

bwitn5fc1#

uniqueDateSet = {};
tmp = Arr.filter(function(elem, idx, arr){
    if(elem.date in uniqueDateSet){
        return false;
    }else{
        uniqueDateSet[elem.date]='';
        return true;
    }});
vmjh9lq9

vmjh9lq92#

您可以使用唯一过滤器来使用特定值的唯一性。
包括图书馆

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>

然后将该模块包含在app模块中
var app = angular.module('plunker', ['ui.filters']);
你的HTML将是

<div ng-repeat="u in users | unique: 'date'">

     <h3 style="color:#2C33BE;">{{u.date}}</h3>

        <ion-item>
             <div class="item-u">{{u.name}}</div>
             <div class="item-u">{{u.adress}}</div>
        </ion-item>
</div>

这里有一个到PLUNKR的工作链接,你可以在其中工作和实验。

相关问题