vendredi 4 mars 2016

How to use array of checkbox and array of text areas/dropdowns in angular js table with ng-repeat?

I have a use case where i need to store which employee is staying in which hotel of particular city for some data processing. I have populated cities in one drop down, once user selects particular city, hotels from that city will be populated in another drop down.

If any hotel is not listed on drop downs, user need to select the checkbox so one text area will appear beside drop downs where user can enter hotel name for that employee and drop downs for that particular employee will be disabled. I was able to handle this stuff initially when there was only 3 cities. But now cities and hotels are increasing and i want to make a dynamic table for this.

So i have written below code,

<tr data-ng-repeat="employee in department.employees">
    <td>
        <input type='checkbox' name="selectedChecks[]" data-ng-model="check" 
        data-ng-change="ShowHide()"/>
    </td>
    <td>{{employee.empId}}.{{employee.empname}}</td>
    <td>
        <select class="form-control" name="selectedCities[]" data-ng-model="hotelsource" 
            data-ng-options="city.cityname for city in cities" data-ng-disabled="check">
            <option value=''>Select</option>
        </select>
    </td> 
    <td>
        <select class="form-control" name="selectedHotels[]" data-ng-disabled="check" data-ng-model="option" 
                data-ng-options="hotel.hotelname for hotel in hotelsource.hotels">
        <option value=''>Select</option>
        </select>
    </td>
    <td>
        <div data-ng-show="ruleArea">
            <textarea id="txtArea" name="txtAreas[]" rows="3" cols="70"></textarea>
        </div>
    </td>

Initially i was hiding text areas as below and there were no array names as shown above,

$scope.ShowHide1 = function () {
    //If DIV is visible it will be hidden and vice versa.
    $scope.ruleArea1 = $scope.check1;
};
$scope.ShowHide2 = function () {
    //If DIV is visible it will be hidden and vice versa.
    $scope.ruleArea2 = $scope.check2;
};
$scope.ShowHide3 = function () {
    //If DIV is visible it will be hidden and vice versa.
    $scope.ruleArea3 = $scope.check3;
};

But now with above table piece of code and only single ShowHide() function, i am able to disable the drop downs but text area hide-show isn't working.

I am very new to Angular JS, So can anyone help me on how to showhide this text areas and how to get this selected values?




Aucun commentaire:

Enregistrer un commentaire