Search code examples
angularjsangularjs-ng-repeatangularjs-ng-checked

angular js dynamic checkbox in ng-repeat


I have services table with Id like

ID  Text
1   Cleaning
2   Washing
3   Folding
4   Drying

I retrieve them using api call and got the Json. I have another table in which I have prices for these services along with the product id, therefore while adding a product i want to add the services and their price. For this I retrieve derives and id using api call and iterate them in a table and the same iteration is used to generate text boxes to enter price of particular service. this is the table i made after long scratching my head.

<table id="dataTable" class="table table-striped table-bordered table-hover">
<thead>
    <tr>
        <th>
            Service
            <i class="fa sort"></i>
        </th>
        <th>
            Price
            <i class="fa sort"></i>
        </th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="Record in ServiceList">
        <td>
            <span>
                <input id={{Record.ID}} ng-model="Services[Record.ID]" ng-checked="Record.ID==ProductProfile.PriceList.ServiceID" type="checkbox">
                <label for={{Record.ID}}>
                    {{Record.Text}}
                </label>
            </span>
        </td>
        <td><span> <input id={{Record.ID}} ng-model="PriceList[Record.Price]" ng-disabled="!Services[Record.ID]" class="col-lg-12" type="number"></span></td>
    </tr>
</tbody>

The scenario is initially all the checkboxes (depending on number of services in service table) are unchecked and text boxes are disabled the user can tick the desired service this will enable the corresponding textbox once the user saves the record the list of selected services and their prices will be in ProductProfile.PriceList which has two attributes ServiceID and Price

I tried to do this by using for loop in my controller but failed


Solution

  • I got it done by

       <div class="col-lg-8">
                                            <table id="dataTable" class="table table-striped table-bordered table-hover">
                                                <thead>
                                                    <tr>
                                                        <th>
                                                            Service
                                                            <i class="fa sort"></i>
                                                        </th>
                                                        <th>
                                                            Price
                                                            <i class="fa sort"></i>
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr ng-repeat="Record in ServiceList">
                                                        <td>
                                                            <span>
                                                                <input id={{Record.ServiceID}} ng-model="Record.IsExist" type="checkbox">
                                                                <label for={{Record.ServiceID}}>
                                                                    {{Record.Text}}
                                                                </label>
                                                            </span>
                                                        </td>
                                                        <td><span> <input ng-model="Record.Price" ng-disabled="!Record.IsExist" class="col-lg-12" step="any" min="0" max="1000" type="number"></span></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>