Question

使用以下命令将项目从一个数组添加到新数组：

<tr ng-repeat="item in listItems">
   <td>{{item.id}}</td>
</tr>

然后打印新阵列：

var chart = new google.visualization.BarChart(document.getElementById(container2));

是否可以使用用户输入更改新listItems数组的属性名称？

Answer 1

当然可能。但不是你的代码编写方式。您需要将对象传递给函数，而不是id。

<tr ng-repeat="x in data">
  <td>{{ x.id }}</td>
  <td><input type="text" ng-model="newVal"/></td> <!--this property can be changed by user-->
  <td><button type="button" ng-click="addToList(x, newVal)">Add to</button></td>
</tr>

并在控制器功能中：

  $scope.addToList = function(item, newVal) {
     var newItem = item;
     newItem.id =  newVal;
     $scope.listItems.push(item);
     console.log($scope.listItems);
  };

Answer 2

你绝对可以这样做，但为此你需要传递对象本身而不是x.id。

以下是一个工作解决方案示例。

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope",
  function($scope) {
    $scope.data = [{
      id: "City-1"
    }, {
      id: "City-2"
    }, {
      id: "City-3"
    }, {
      id: "City-4"
    }, {
      id: "City-5"
    }];

    $scope.listItems = [];
    $scope.addToList = function(item) {
      $scope.listItems.push(item);
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <table>
      <tr ng-repeat="x in data">
        <td>
          {{ x.id }}</td>
        <td>
          <button type="button" ng-click="addToList(x)">Add to</button>
        </td>
      </tr>
    </table>
    New List:
    <table>
      <tr ng-repeat="item in listItems track by $index">
        <td>
          {{ item.id }}</td>
        <td>
          <button type="button" ng-click="addToList(x)">Add to</button>
        </td>
      </tr>
    </table>
  </div>
</div>

Angularjs重命名数组中的项目

2 个答案: