javascript - 如何在带有ng-repeat的angular js表中使用复选框数组和文本区域/下拉列表数组？

Question

我有一个用例，我需要存储哪个员工住在特定城市的哪个酒店以进行某些数据处理。我在一个下拉列表中填充了城市，一旦用户选择了特定城市，该城市的酒店将在另一个下拉列表中填充。

如果任何酒店未列在下拉菜单中，用户需要选中该复选框，这样下拉菜单旁边会出现一个文本区域，用户可以在其中输入该员工的酒店名称，该特定员工的下拉菜单将被禁用。当只有 3 个城市时，我最初能够处理这些东西。但是现在城市和酒店越来越多，我想为此制作一个动态表。

所以我写了下面的代码，

<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>

最初我隐藏了下面的文本区域，没有上面显示的数组名称，

$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;
};

但现在使用上面的代码段和单个 ShowHide() 函数，我可以禁用下拉菜单，但文本区域隐藏显示不起作用。

我是 Angular JS 的新手，所以任何人都可以帮助我了解如何显示隐藏此文本区域以及如何获取此选定值吗？

Answer 1

试试这个。并且还为其他字段类似地址定义 ng-model。

var app = angular.module("app",[]);

app.controller("MyCtrl" , function($scope){
  
   $scope.data ={
     "employees":[
      {"empId":"emp123","empname":"abc","address":"address1","level":"level1"},
        {"empId":"emp127","empname":"abc1","address":"address2","level":"level2"}
       
     ]  
   };
  
  $scope.check = [true,true];
  
 
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
   <table>
     <tr data-ng-repeat="employee in data.employees">
       <td>
        <input type='checkbox' name="selectedChecks[]" data-ng-model="check[$index]" ng-change="ShowHide()" 
        data-ng-change="ShowHide()"/>
    </td>
    <td>
      <div data-ng-show="check[$index]">
           <textarea id="txtArea" name="txtAreas[$index]" ng-model="employee.address" rows="3" cols="70"> </textarea>
        </div>
             
    </td>
     </tr>
   </table> 
    <span>{{data|json}}</span>
</div>