Question

我有一个按钮组，我想将所选按钮的值传递回我的控制器，但它不起作用，它只是返回未定义...

HTML

var depDate = moment(response.departureDate);
var arrDate = moment(response.arrivalDate);
var nbDays = depDate.diff(arrDate, 'days');

控制器：

<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <button type="button" ng-model="activeCustomer" value="active" ng-click="getVal()" class="btn btn-default">Active</button>
        <button type="button" ng-model="activeCustomer" value="inactive" ng-click="getVal()" class="btn btn-default">Inactive</button>
        <button type="button" ng-model="activeCustomer" value="all" ng-click="getVal()" class="btn btn-default">All</button>

        {{change}}
    </div>

但是如果我将代码从aap=angular.module('myApp',[]) .controller('myCtrl',["$scope",function($scope){ //set the radio buttons $scope.change='the data'; $scope.getVal=function(){ console.log($scope.change); console.log($scope.activeCustomer); $scope.change=$scope.activeCustomer; } }]);更改为<button type="button"则可行！有任何想法吗？感谢

http://plnkr.co/edit/Hfu7EGQ05hA59Sgty29H?p=preview

Answer 1

这是工作代码 -

<body ng-app="myApp">
<div ng-controller="myCtrl">
        <button type="button" ng-model="activeCustomer" value="active" ng-click="getVal($event)" class="btn btn-default">Active</button>
        <button type="button" ng-model="activeCustomer" value="inactive" ng-click="getVal($event)" class="btn btn-default">Inactive</button>
        <button type="button" ng-model="activeCustomer" value="all" ng-click="getVal($event)" class="btn btn-default">All</button>

        {{change}}
    </div>


<script>
aap=angular.module('myApp',[])
.controller('myCtrl',["$scope",function($scope){
  //set the radio buttons
    $scope.change='the data';
    $scope.getVal=function(active){
        console.log($scope.change);
        console.log(active.currentTarget.value);
        $scope.change=active.currentTarget.value;
    }
}]);


</script>

您需要为每个按钮传递$ event并在控制器中访问它。然后你可以改变价值。

以下是plunker： -

http://plnkr.co/edit/wkzJ46zRoczkMPomzEok?p=preview

Answer 2

HTML

 <div ng-controller="myCtrl">
            <button type="button"
                    value="active"
                    ng-click="getVal('active')"
                    class="btn btn-default">
                Active
            </button>
            <button type="button"
                    value="inactive" 
                    ng-click="getVal('inactive')"
                    class="btn btn-default">
                Inactive
            </button>
            <button type="button"
                    value="all" 
                    ng-click="getVal('all')"
                    class="btn btn-default">
                 All
            </button>
 </div>

控制器：

.controller('myCtrl',["$scope",function($scope){
    $scope.getVal=function(buttonClicked){
        // buttonClicked contains the button name which is clicked
        console.log(buttonClicked);
    }
}]);

Answer 3

请记住，Bootstrap只是一个让事物看起来漂亮的CSS库;它不会改变任何浏览器元素的行为。默认情况下，HTML <button>标记不是表示数据的表单元素，因此ng-model不知道如何附加到它们。如果您希望单选按钮组与ng-model一起使用，则需要使用radio button directive in UI Bootstrap或其他类似指令。

AngularJS将bootstrap按钮组值传递给控制器

3 个答案: