0

Есть два контроллера:

       app.controller('comboController',  function ($scope, $http) {
        $http.get("http://InternetShop/php_files/supermarket.php?category=main").
            success(function (data) {
            $scope.categoryes = data;
            console.log($scope.categoryes);
    });
        $scope.SetCategoryName = function(category){
            console.log(category);
          $scope.$broadcast('changeVal', category);
        };
});

        app.controller('tableController', function ($scope, $http) {    
        $scope.currentCombo = "Meat";
            $scope.$on( 'changeVal', function(event, data ) {console.log(data);
            $scope.currentCombo = data;      
    }); 
      GetRequest($scope, $http, $scope.currentCombo);
});

function GetRequest($scope, $http, currentCombo){
    $http.get("http://InternetShop/php_files/supermarket.php?category="+currentCombo).
            success(function (data) {
            $scope.products = data;
            console.log($scope.products);
        });
}

Логика такова, что при клике по одному из значений выпадающего списка должна обновится таблица. Но ничего не робит. Есть подозрения что я что-то не так с событиями сделал. Вот вьюха:

<div ng-controller="comboController">
    <div  class="form-group col-sm-2" >
        <select  class="form-control">
            <optgroup ng-repeat="category in categoryes track by $index"> 
                <option ng-click="SetCategoryName(category)">{{category}}</option>
            </optgroup>
        </select>
    </div>
<div class="col-sm-10" ng-controller="tableController">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>id</th>
                <th>Foto</th>
                <th>Name</th>
                <th>Price</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody >
            <tr ng-repeat="product in products track by $index">
                <td>{{product.id}}</td>
                <td><img alt="alt" src="img/{{product.img}}"/></td>
                <td>{{product.name}}</td>
                <td>{{product.price}}</td>
                <td>{{product.description}}</td>
            </tr>
        </tbody>
    </table>
</div>
</div>

1 ответ 1

1

В общем разобрался сам. Я не правильно обрабатывал событие во вьюхе. Соответственно переделав конструкцию тега <select></select> и установив обработчик ng-change и ng-model все заработало как часики. Собственно сами правки:

<div  class="form-group col-sm-2" >
        <select  class="form-control" ng-model='selectedItem' ng-change="SetCategoryName(selectedItem)">                
            <option ng-repeat="category in categoryes track by $index" >{{category}}</option>                
        </select>
    </div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.