Question

在AngularJS中，我有多个按钮可供人们过滤页面。

在Angular中检测按钮单击并将$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>

JS

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

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

Answer 1

ng-click是处理Angular中点击的一种自然方式。但是，对于您的问题，您可以考虑使用无线电或复选框按钮。您可以在Angular-Bootstrap中找到此类组件。

Answer 2

仅使用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>

Answer 3

＆＃13;

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;



  };
});

＆＃13;

<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>

＆＃13;

单击按钮时更改角度范围的值

3 个答案: