如何使用angularjs自定义排序这些数据?

时间:2017-10-27 05:56:02

标签: javascript angularjs

我的HTML文件

<Grid BackgroundColor="##60000000"
        IsVisible="{Binding IsLoading}">
    <Grid VerticalOptions="CenterAndExpand">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=".5*" />
            <ColumnDefinition Width="9*" />
            <ColumnDefinition Width=".5*" />
        </Grid.ColumnDefinitions>
        <Frame Grid.Column="1"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Padding="0"
                HasShadow="True"
                OutlineColor="#e6e6e6">
            <Grid BackgroundColor="White"
                    RowSpacing="0"
                    ColumnSpacing="0">
                <StackLayout>
                    <ActivityIndicator IsRunning="true"
                                        Margin="10"
                                        HorizontalOptions="Center"
                                        VerticalOptions="Center" />
                    <Label Text="{i18n:Translate Text=loading_contacts}"
                            Margin="20,0,20,10"
                            HorizontalOptions="Center"
                            VerticalOptions="Center"/>
                </StackLayout>     
            </Grid>
        </Frame>
    </Grid>
</Grid>

我的js文件

 <div ng-controller="MyCtrl">    
<input type="text" ng-model="searchText" />
<ul ng-repeat="strVal in arrVal|filter:searchText|mySort" > 
 <li>{{strVal}}</li>
  </ul></div>

但结果是,我不想输出这个结果

var app=angular.module('myApp', []);
app.controller('MyCtrl', function ($scope,$filter) {
  $scope.arrVal = ['six','one','two','five','three','four'];  
});

app.filter('mySort', function() {
return function(input) {
  return input.sort();
}
  });

我希望这是我的最终输出结果,任何想法

five//but it is order by A-Z, I am very unhappy 
four
one
six
three
two

任何想法如何做到这一点,对你这么多

Fiddle

2 个答案:

答案 0 :(得分:1)

你必须将你的单词转换为数字我已找到这个SO Post并使其工作类似

app.filter('mySort', function() {

var Small = {
    'zero': 0,
    'one': 1,
    'two': 2,
    'three': 3,
    'four': 4,
    'five': 5,
    'six': 6,
    'seven': 7,
    'eight': 8,
    'nine': 9,
    'ten': 10,
    'eleven': 11,
    'twelve': 12,
    'thirteen': 13,
    'fourteen': 14,
    'fifteen': 15,
    'sixteen': 16,
    'seventeen': 17,
    'eighteen': 18,
    'nineteen': 19,
    'twenty': 20,
    'thirty': 30,
    'forty': 40,
    'fifty': 50,
    'sixty': 60,
    'seventy': 70,
    'eighty': 80,
    'ninety': 90
};

var Magnitude = {
    'thousand':     1000,
    'million':      1000000,
    'billion':      1000000000,
    'trillion':     1000000000000,
    'quadrillion':  1000000000000000,
    'quintillion':  1000000000000000000,
    'sextillion':   1000000000000000000000,
    'septillion':   1000000000000000000000000,
    'octillion':    1000000000000000000000000000,
    'nonillion':    1000000000000000000000000000000,
    'decillion':    1000000000000000000000000000000000,
};

var a, n, g;

function text2num(s) {
    a = s.toString().split(/[\s-]+/);
    n = 0;
    g = 0;
    a.forEach(feach);
    return n + g;
}

function feach(w) {
    var x = Small[w];
    if (x != null) {
        g = g + x;
    }
    else if (w == "hundred") {
        g = g * 100;
    }
    else {
        x = Magnitude[w];
        if (x != null) {
            n = n + g * x
            g = 0;
        }
        else { 
            alert("Unknown number: "+w); 
        }
    }
}

    return function(input) {
    console.log(input);
      return input.sort(function(a, b) {
  return text2num(a) - text2num(b);
});
    }
  });

Working fiddle

答案 1 :(得分:0)

试试这样。

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller='myController'>
        <input type="text" ng-model="searchText" />
  <ul ng-repeat="strVal in arrVal|filter:searchText | orderBy:'':'true'" >
      <li>{{strVal}}</li>
  </ul>
  </div>
</div>
&#13;
{{1}}
&#13;
&#13;
&#13;