Question

当我点击更新链接时，我想在当前部分显示一些消息，但我在所有部分都看到了消息。我怎么能在Angularjs data-ng-repeat中做？我不想使用JQuery。

查看：

 <div data-ng-repeat="item in $scope.items">
                                {{item.name}}
                            <input type="number" data-ng-value="0" />
                                <span>{{$scope.ErrorMessage}}</span>
                            </div>
<button ng-click="save()">click</button>

控制器：

 $scope.save= function () {
 for (var i = 0; i < vm.items.length; i++) {
                            svc.update(item[i])
                                        .then(function (data) {
                                            $scope.customer = data;
                                        })
                                        .catch(function (error) {
                                           $scope.ErrorMessage="not updated"
                                        });
}

我在单击时保存ng-repeat数据。每个部分都是自己的API调用。如果任何调用都无法保存数据，我需要在该部分下面显示消息。

Answer 1

试试这个，

var app = angular.module('app', []);

app.controller('indexCtrl', function ($scope) {

  $scope.items = ['bulk update 02 Mar', 'bulk update 03 Mar'];
  $scope.errorMessages = [];
  
  $scope.save = function () {
    
   // you can use your save logic here instead of angular.forEach
    angular.forEach($scope.items, function(item, key) {
       $scope.errorMessages[key] = "Error occurred";
    });
    
     
  }
});

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="indexCtrl">
    <table class="table">
      <tbody>
        <tr>
          <td>Description</td>
          <td>Process</td>
        </tr>
        <tr ng-repeat="item in items">
          <td>{{item}}</td>
          <td>{{errorMessages[$index]}}</td>
        </tr>
      </tbody>
    </table>
    <button ng-click="save()">Save</button>
  </body>

</html>

Answer 2

您的代码中存在错误。要在DOM中引用variable，不应使用$scope。仅在'。js'文件中，使用$scope。另外，问题中未提供您在HTML中循环的json数据。所以我假设了一个。

查看演示here。

<强> HTML：

<div ng-app="app" ng-controller="test">
    <div data-ng-repeat="item in items">
        {{item.name}}
        <input type="number" data-ng-value="0" />
        <button ng-click="dynamicmessage(item)">click</button>
        <span>{{item.message}}</span>
    </div>
</div>

<强> JS：

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

app.controller('test', function ($scope) {
    $scope.items = [{
        'name': 'item 1'
    }, {
        'name': 'item 2'
    }, {
        'name': 'item 3'
    }, {
        'name': 'item 4'
    }, ];
    $scope.dynamicmessage = function (obj) {
        obj.message = 'Hi';
    }
});

Angularjs ng-repeat在Onclick部分

2 个答案: