Изменить значение угловой области при нажатии кнопок

В AngularJS у меня есть несколько кнопок, которые позволяют людям фильтровать страницу.Изменить значение угловой области при нажатии кнопок

Что такое обычный способ обнаружения нажатия кнопки в углу и установить значение $scope.filter_value на значение кнопки?

Должен ли я прилагать ng-click ко всему, или есть лучший способ?

jsfiddle:http://jsfiddle.net/9u1aqq24/

HTML

<main ng-app="myApp"> 
    <section ng-controller="myController"> 
     <h4>Filter by Role</h4> 
     <div class="btn-group" ng-click="???"> 
      <button type="button" class="btn btn-default" data-role="frontend developer" ng-click="console.log('CLICKED');"> 
       Frontend 
      </button> 
      <button type="button" class="btn btn-default" data-role="backend developer"> 
       Backend 
      </button> 
      <button type="button" class="btn btn-default" data-role="full stack developer"> 
       Full Stack 
      </button> 
     </div> 
     <h4>Filter value</h4> 
     <p>{{filter}}</p> 
    </section> 
</main>

var myApp = angular.module('myApp', []); 

myApp.controller('myController', ['$scope', function($scope){ 
    $scope.filter = null; 
}]);

источник

2015-01-08 Don P

добавленный код к вопросу –

ng-click естественный способ обработки кликов в Угловое. Однако для вашей проблемы вы можете использовать кнопки radio- или checkbox. Такие компоненты можно найти, например, в Angular-Bootstrap.

источник

2015-01-08 22:16:29 fracz

Хорошо, поэтому Angular-bootstrap - это классно - но даже если я использую группу кнопок из него, он просто обновляет $ scope.myModel. Как я могу начать с таких новых событий, как $ http (потому что мне нужно получить новые данные с сервера)? –

'$ scope. $ Watch ('myModel', function() {/ * $ http ... * /});' – fracz

Используйте только ng-click="somefunction(parametr)"

и после этого в контроллере

$scope.somefunction = function(parametr) 
{ 
.... 
}

var app = angular.module('app', []); 
 

 
app.controller('firstCtrl', function($scope) { 
 
    $scope.setFilter = function(type) { 
 
    // you can put all your logic here ($http.get.. or whatever) 
 
    $scope.filter = type; 
 

 

 

 
    }; 
 
});

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

 
<body ng-app="app"> 
 
    <div ng-controller="firstCtrl"> 
 

 
    <h4>Filter by Role</h4> 
 

 
    <div class="btn-group" ng-click="???"> 
 
     <button type="button" class="btn btn-default" data-role="frontend developer" ng-click="setFilter('frontend developer')">Frontend</button> 
 
     <button type="button" class="btn btn-default" data-role="backend developer" ng-click="setFilter('backend developer')">Backend</button> 
 
     <button type="button" class="btn btn-default" data-role="full stack developer" ng-click="setFilter('full stack developer')">Full Stack</button> 
 
    </div> 
 
    <h4>Filter value</h4> 
 

 
    <p>{{filter}}</p> 
 

 
    </div> 
 
</body>

источник

2015-01-09 00:36:57 sylwester

var app = angular.module('app', []); 
 

 
app.controller('firstCtrl', function($scope) { 
 
    $scope.setFilter = function(type) { 
 
    // you can put all your logic here ($http.get.. or whatever) 
 
    $scope.filter = type; 
 

 

 

 
    }; 
 
});

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

 
<body ng-app="app"> 
 
    <div ng-controller="firstCtrl"> 
 

 
    <h4>Filter by Role</h4> 
 

 
    <div class="btn-group" ng-click="???"> 
 
     <button type="button" class="btn btn-default" data-role="frontend developer" ng-click="setFilter('frontend developer')">Frontend</button> 
 
     <button type="button" class="btn btn-default" data-role="backend developer" ng-click="setFilter('backend developer')">Backend</button> 
 
     <button type="button" class="btn btn-default" data-role="full stack developer" ng-click="setFilter('full stack developer')">Full Stack</button> 
 
    </div> 
 
    <h4>Filter value</h4> 
 

 
    <p>{{filter}}</p> 
 

 
    </div> 
 
</body>

источник

2017-04-14 13:50:15

Добро пожаловать в SO. Ваш ответ содержит только код. Было бы лучше, если бы вы могли добавить описание того, что он делает и как. Вы можете отредактировать свой ответ и добавить его? Спасибо! –

Изменить значение угловой области при нажатии кнопок

ответ

Смежные вопросы