Question

请帮助我，不能在下拉框中选择使用angularjs排序数据的选项。我用按钮试了一下，它工作但只有双击。我想让它与选择选项一起使用。

JS：

var app = angular.module('sorterApp', [])
.controller('carsController', ['$scope', 'orderByFilter', function($scope, orderBy) {
    var cars = [
        {name:"Volvo", price:3000, date:"2008/01"},
        {name:"BMW", price:6500, date:"2010/02"},
        {name:"Saab", price:2700, date:"2007/08"},
        {name:"Land Rover", price:8200, date:"2012/09"},
        {name:"Skoda", price:3000, date:"2009/11"},
        {name:"Deawoo", price:1500, date:"2009/05"},
        {name:"Nissan", price:6700, date:"2012/04"},
        {name:"Toyota", price:7900, date:"2007/07"},
        {name:"Dacia", price:1100, date:"2004/02"},
        {name:"Lada", price:750, date:"1995/01"},
        {name:"Mercedes", price:11000, date:"2013/08"},
        {name:"Bugatti", price:35000, date:"2012/07"}
    ];

    var propertyName = null;

    $scope.propertyName = 'name';
    console.log(propertyName + "property name after  $scope.propertyName = 'name';")

    $scope.cars = orderBy(cars, $scope.propertyName);

    $scope.sortBy = function(propertyName) {
        console.log(propertyName + " - property name inside sortBy before ordering")

        $scope.cars = orderBy(cars, $scope.propertyName);
        $scope.propertyName = propertyName;
        console.log(propertyName + " - property name inside sortBy after ordering")
    };
}]);

HTML：

<body ng-controller="carsController">
<div class="container">
    <h1>Solomonotask</h1>
    <div class="row">
        <div class="col-sm-6">
            <p>Вживані авто від Solomonotask.com</p>
        </div>
        <div class="col-md-4 col-xs-6">
            <div class="form-group input-group input-group-sm">
                <label class="input-group-addon" for="input-sort">Сортувати:</label>
                <button ng-click="sortBy('name')">Name</button>
                <button ng-click="sortBy('price')">Price</button>
                <button ng-click="sortBy('date')">Date</button>

                <select id="input-sort" class="form-control" ng-model="propertyName">
                    <option value="name">назва (А - Я)</option>
                    <option value="price">ціна (низька &gt; висока )</option>
                    <option value="date">дата (старі &gt; нові)</option>
                </select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="product-layout product-list col-xs-12">
            <div class="product-thumb">
                <div class="caption" ng-repeat="car  in cars">
                    <h4>{{car.name}}</h4>
                    <p>{{car.date}}</p>
                    <p>{{car.price}} USD</p>
                    <div class="button-group">
                        <button type="button" onclick="#"><i class="fa fa-shopping-cart"></i> <span
                                class="hidden-xs hidden-sm hidden-md">Купити</span></button>
                    </div>
                    <br/>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

Answer 1

您可以在选择

中使用ng-change

    <select  ng-model="selectedItem" ng-change="sortBy()">
      <option value="name">назва (А - Я)</option>
      <option value="price">ціна (низька &gt; висока )</option>
      <option value="date">дата (старі &gt; нові)</option>
    </select>

和

$scope.sortBy = function() {
   console.log($scope.selectedItem);
   //filter here

}

angular js不适用于select元素的选项

1 个答案: