JSFiddle - React, Tailwind, and code Playground

by Sergio

HTML

<div ng-app ng-controller="ListController">

    <div ng-repeat="rule in rules">
        {{ rule.rule_name }}
        <input type="radio" name="{{rule.rule_ref}}" ng-model="rule.assigned_to" ng-value="0" ng-change='updateSelected(selected_rules)'/> Zero
        <input type="radio" name="{{rule.rule_ref}}" ng-model="rule.assigned_to" ng-value="1" ng-change='updateSelected(selected_rules)'/> One
        <input type="radio" name="{{rule.rule_ref}}" ng-model="rule.assigned_to" ng-value="2" ng-change='updateSelected()'/> One
    </div>
    <p> {{ selected_rules }}</p>
</div>

JavaScript

function ListController($scope) {
    $scope.rules = [
        {rule_ref:'R1', rule_name:'Rule 1', assigned_to: 0},
        {rule_ref:'R2', rule_name:'Rule 2', assigned_to: 1},
        {rule_ref:'R3', rule_name:'Rule 3', assigned_to: 1},
        {rule_ref:'R4', rule_name:'Rule 4', assigned_to: 1},
        {rule_ref:'R5', rule_name:'Rule 5', assigned_to: 2},
        {rule_ref:'R6', rule_name:'Rule 6', assigned_to: 0}
    ];
    
    $scope.selected_rules = [];
    $scope.updateSelected = function () {
        $scope.selected_rules = [];
        angular.forEach($scope.rules, function(rule){
            if(rule.assigned_to>0)
                $scope.selected_rules.push(rule);
        }); 
    };
}