Question

我在表格列中添加了“Add_Note”按钮一旦按钮单击文本区域并保存按钮正在打开，但问题是它是否影响了我想通过使用索引值显示它们的所有行，如何使用ng-repeat实现此目的。如果我想在特定行中单击该行的文本区域应该打开剩余应该是关闭。

var myApp = angular.module('myApp', [])
  
      .controller('employeeController', function ($scope) {
     
   var employees = [{
    "Name": "Alfreds Futterkiste",
    "City": "Berlin",
    "Country": "Germany"
  }, {
    "Name": "Berglunds snabbköp",
    "City": "Luleå",
    "Country": "Sweden"
  }, {
    "Name": "Blauer See Delikatessen",
    "City": "Mannheim",
    "Country": "Germany"
  }, {
    "Name": "Blondel père et fils",
    "City": "Strasbourg",
    "Country": "France"
  }, {
    "Name": "Bólido Comidas preparadas",
    "City": "Madrid",
    "Country": "Spain"
  }, {
    "Name": "Bon app'",
    "City": "Marseille",
    "Country": "France"
  }, {
    "Name": "Bottom-Dollar Marketse",
    "City": "Tsawassen",
    "Country": "Canada"
  }, {
    "Name": "Cactus Comidas para llevar",
    "City": "Buenos Aires",
    "Country": "Argentina"
  }, {
    "Name": "Centro comercial Moctezuma",
    "City": "México D.F.",
    "Country": "Mexico"
  }, {
    "Name": "Chop-suey Chinese",
    "City": "Bern",
    "Country": "Switzerland"
  }, {
    "Name": "Comércio Mineiro",
    "City": "São Paulo",
    "Country": "Brazil"
  }];
      $scope.employees=employees;
      
      $scope.showHideAddNotes = function (vendorsId, $index) {
        $scope.comments = vendorsId;
        angular.forEach($scope.employees, function (vendr) {
            if (vendr.VendID == $scope.comments) {
                $scope.showComment = true;
            }
        })
    }
})

        .textarea-container {
            position: relative;
        }

            .textarea-container textarea {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<body ng-app="myApp">
    <div ng-controller="employeeController">
        <div class="container" style="margin-top:40px;">
            <div class="row">
                {{error}}
                <div class="col-md-6">
                    <table class="table table-bordered table-condensed">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>City</th>
                                <th>Country</th>
                            </tr>
                        </thead>
                        <tbody >
                            <tr ng-repeat="emp in employees" ng-style="set_color(emp)">
                                <td>{{emp.Name}}<br>
                                 <div>
                                                <a href="#" ng-click="showHideAddNotes(vendor.VendID, $index)">
                                                    <img src="http://icongal.com/gallery/image/43850/notes_add.png" />
                                                </a>
                                            </div>
                                            <div class="textarea-container" ng-model="commentsArea" ng-show="showComment">
                                                <textarea name="foo" placeholder="Add comments here...">{{vendor.PaymetNotes}}</textarea>
                                                <span class="label label-danger pointer" onclick="addNote()">Save</span>
                                            </div>
                                
                                </td>
                                <td>{{emp.City}}</td>
                                <td>{{emp.Country}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>

Answer 1

你可以通过以下方式完成，我假设$scope.griddata为您的数据对象，它将是一个对象数组。

你可以循环遍历$scope.griddata，在每个对象（每个数组项）中添加一个布尔属性，说showNotes = false。因此，默认情况下，借助此标记，最初将隐藏所有行的文本区域。

$scope.gridData = [
{'note':'Lorem Ipsum is simply dummy text ','showNotes':false},
{'note':'dummy text 2','showNotes':false}
];

$scope.showHideAddNotes = function ($index) {
    $scope.griddata[$index].showNotes = !$scope.griddata[$index].showNotes;
}

然后在showHideAddNotes()函数中按照标记反转标记。

小提琴参考：https://jsfiddle.net/vaibhavgavali92/1x04qs0v/

注意：除了相应项目的每个标记外，您还可以使用全局标记限制一次编辑一行/项目的注释。所以它无法打开多个项目的编辑流程。

如何使用angulajs编辑表格中的特定列值？

1 个答案: