Angular.js排序依据：sortColumn没有排序选定列

这里@ Model.jsonString是一个字符串Angular.js排序依据：sortColumn没有排序选定列

@model WebApplication1.Models.Car 
@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
<html> 

<head> 

    <title></title> 

    <script src="~/Scripts/angular.min.js"></script> 

    <link href="~/Content/Style.css" rel="stylesheet" /> 
    <script src="~/Scripts/angular.js"></script> 
    <script src="~/Scripts/script.js"></script> 

</head> 
<body ng-app="myModule"> 
<div ng-controller="myContoller" ng-init="init(@Model.jsonString)"> 

    OrderBy : <select ng-model="sortColumn"> 
     <option value="+Mileage">Mileage Asc</option> 
     <option value="+Name">Name Asc</option> 
     <option value="+Model">Model Asc</option> 
     <option value="+Engine">Engine Asc</option> 
     <option value="+Color">Color Asc</option> 

    </select> 
    <table class="table"> 
     <thead > 

      <tr class="th"> 
       <th>Mileage</th> 
       <th>Name</th> 
       <th>Model</th> 
       <th>Engine</th> 
       <th>Color</th> 
      </tr> 
     </thead> 
     <tbody> 

      <tr ng-repeat="car in cars | orderBy:sortColumn"> 
       <td>{{car.mileage}}</td> 
       <td>{{car.name}}</td> 
       <td>{{car.model}}</td> 
       <td>{{car.engine}}</td> 
       <td>{{car.color}}</td> 

      </tr> 

     </tbody> 
    </table> 
</div> 


</body> 




</html>

这里是的script.js

我试图代码

/// <reference path="angular.js" /> 
var app = angular 
    .module("myModule", []) 
    .controller("myContoller", 
     function ($scope) { 

      $scope.init = function(jsonString) { 
       //This function is sort of private constructor for controller 

       $scope.cars = jsonString; 


      }; 
      $scope.sortColumn = "Name"; 
     });

对所有列进行排序，orderBy：sortColumn由于某种原因似乎不起作用。任何提示将不胜感激。谢谢

来源

2017-02-24 Pruthvinath

我想我已经使用了正确的关键字。你能指出它出错的地方吗？感谢@ adam0101 – Pruthvinath

您是否尝试像这样定义ngRepeat：''？ – yuro

选择框值名称应该与数组属性名称相同的名称。并删除加号图标。使用-在它面前只有当你需要按降序排列

angular 
 
\t .module("myModule", []) 
 
\t .controller("myContoller", function($scope) { 
 
\t \t $scope.init = function(jsonString) { 
 
\t \t \t //This function is sort of private constructor for controller 
 
\t \t \t $scope.cars = [ 
 
     { 
 
      'mileage':'16', 
 
      'name':'asss', 
 
      'model':'sst', 
 
      ' engine':'aagaa', 
 
      'color':'yellow' 
 
     }, 
 
     { 
 
      'mileage':'14', 
 
      'name':'sss', 
 
      'model':'sdt', 
 
      ' engine':'avaaa', 
 
      'color':'red' 
 
     }, 
 
     { 
 
      'mileage':'12', 
 
      'name':'dsss', 
 
      'model':'sgt', 
 
      ' engine':'aaaaa', 
 
      'color':'blue' 
 
     } 
 
     ]; 
 
\t \t }; 
 
    \t $scope.init() 
 
\t \t $scope.sortColumn = "Name"; 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myModule"> 
 
<div ng-controller="myContoller" 
 
> 
 

 
    OrderBy : <select ng-model="sortColumn"> 
 
     <option value="mileage">Mileage Asc</option> 
 
     <option value="name">Name Asc</option> 
 
     <option value="model">Model Asc</option> 
 
     <option value="engine">Engine Asc</option> 
 
     <option value="color">Color Asc</option> 
 

 
    </select> 
 
    <table class="table"> 
 
     <thead > 
 

 
      <tr class="th"> 
 
       <th>Mileage</th> 
 
       <th>Name</th> 
 
       <th>Model</th> 
 
       <th>Engine</th> 
 
       <th>Color</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 

 
      <tr ng-repeat="car in cars | orderBy:sortColumn"> 
 
       <td>{{car.mileage}}</td> 
 
       <td>{{car.name}}</td> 
 
       <td>{{car.model}}</td> 
 
       <td>{{car.engine}}</td> 
 
       <td>{{car.color}}</td> 
 

 
      </tr> 
 

 
     </tbody> 
 
    </table> 
 
</div> 
 
</body>

来源

2017-02-24 20:46:51

非常感谢。你拯救了我的一天。我的upvote不算，因为我只有1个声望。对不起。 – Pruthvinath

肯定没有问题，只是标记为正确的答案 –

你的选项值有大写字母订购项目，但你的对象属性有小写字母。

来源

2017-02-24 20:55:00 adam0101

这里是一个工作plunker：https://plnkr.co/edit/pRWiL3iIA96fnGgrscco?p=preview – adam0101

Angular.js排序依据：sortColumn没有排序选定列

回答

相关问题