Question

我有一些具有一定价值的单选按钮。我想要实现的是，在选择某些单选按钮时，它的值应该加起来并显示为总数。

这是我的AngularJS指令和控制器代码：

angular.module('mapp',[])

.controller('ctrl',['$scope',function($scope){


    $scope.items = [
        {'Id':1, 'Cost':100},
        {'Id':2,'Cost':200}
        ];

    $scope.total = 0;
}])

.directive('customElement',function(){
    return {
        restrict: 'E',
        scope:{
            data: '=info'
        },
        template: '<input type="radio" ng-model="data">\
                    <span>{{data}}</span>'
    }
});

这是HTML代码：

<div ng-app="mapp">
    <div ng-controller="ctrl">

        <custom-element ng-repeat="item in items" info="item.Cost"></custom-element>

        <br/>
        <br/> Total: <span>{{total}}</span>
    </div>
</div>

这是一个DEMO。

Answer 1

您可以通过向指令传递两个不同的参数来执行此操作：data（对于标签），然后是辅助布尔selected，以确定是否选择了该项。

<强>使用Javascript：

angular.module('mapp',[])

.controller('ctrl',['$scope',function($scope){


    $scope.items = [
        {'Id':1, 'Cost':100, selected: false},
        {'Id':2,'Cost':200, selected: false}
    ];

    $scope.total = function () {

        var selectedItems = $scope.items.filter(function (d) { return d.selected; });
        console.log('items = ', $scope.items);
        var totalSum = 0;
        selectedItems.forEach(function (item) {
            totalSum += item['Cost'];
        });
        return totalSum;
    };
}])

.directive('customElement',function(){
    return {
        restrict: 'E',
        scope:{
            data: '=info',
            selected: '=selected'
        },
        template: '<input type="radio" ng-model="selected" ng-value="true">\
                    <span>{{data}}</span>'
    }
});

<强> HTML ：

<custom-element ng-repeat="item in items" 
                info="item.Cost" 
                selected="item.selected">
</custom-element>

最后，您需要通过getter计算total。

演示：http://jsfiddle.net/vv46xs0c/

Answer 2

我没有用单选按钮取得成功（我对这件事情不太了解:-(，我不能＆＃34;取消选中＆＃34;单选按钮），但我＆＃39 ; ve成功了复选框

这是您更新的小提琴：http://jsfiddle.net/8kpddb92/4/

我需要改变什么：

ng-model需要布尔值

在控制器中添加一个功能

$scope.handleChange = function(){
    $scope.total = 0;
    for (var i=0; i < $scope.items.length; i++){
        if ($scope.items[i].isSelected)
            $scope.total += $scope.items[i].Cost;
    }
}

在child指令中调用此函数：

    template: '<input type="checkbox" ng-model="data.isSelected" ng-change=$parent.handleChange()>\
                <span>{{data.Cost}}</span>'

Answer 3

无需制作新范围。只需使用＆＃39;项目＆＃39;从重复。点击调用更改功能，传递项目，你可以去：）

angular.module('mapp',[])

.controller('ctrl',['$scope',function($scope){


        $scope.items = [
            {'Id':1, 'Cost':100},
            {'Id':2,'Cost':200}
        ];

        $scope.total = 0;

        $scope.change = function(item) {
            $scope.total = item.Cost;
        };

    }])

    .directive('customElement',function(){
        return {
            restrict: 'E',
            template: '<input type="radio" name="radios" ng-click="change(item)"><span>{{item.Cost}}</span>'
        }
    });

AngularJS：控制器中的访问单选按钮值更改

3 个答案: