Home > OS >  ng-if not working with ng-repeat and radio button
ng-if not working with ng-repeat and radio button

Time:07-01

I have the following html template:

    <div ng-app ng-controller="Ctrl">
    <div >
        <table>
        <tr><th ng-repeat="column in columns">{{column}}</th></tr>
        
        <tr ng-repeat="(i, row) in people">
          <td ng-repeat="(j, column) in columns">
            <input type="radio" name="select" ng-if="column === 'id'">
            <span>{{row[column]}}</span>
          </td>
        </tr>
        </table>                        
    </div>    
</div>

Then I define my Ctrl as follow

function Ctrl($scope) {

    $scope.selectedId = 'aaaaa';
    
    $scope.columns = ['id','name', 'age'];
    
    $scope.people=[
        { 
            'id':'aaaaa', 'name':'rachit', 'age':11
        },
        { 
            'id':'bbbbb', 'name':'gulati', 'age':12
        },
        { 
            'id':'ccccc', 'name':'rocks', 'age': 13
        }
    ]
}

https://jsfiddle.net/en91zuxb/

it's showing radio input for all the item, while my intention is to only show the radio button on the first column, because the 1st column is the id column... ...

CodePudding user response:

It seems that your angular version is old, this was an error related to angularjs < 1.2. Try upgrading your angularjs version or use ng-show instead.

Following code worked for me.

<input type="radio" name="select" ng-show="column == 'id' ">
  • Related