Question

已更新 我想从显示的单个输入文本框中单独更改ng-repeat值，我正在尝试将输入框绑定到标签，但所有值绑定在一起，请你告诉我如何只更改选定的div值，我不想使用ng-repeat来添加值，请告诉我不使用ng-重复开始再次添加你可以使用ng-repeat进一步的功能，表格应该显示在某个位置，将输入框中的值改为标签，可以请你解决这个问题。 Working DEMO

var app = angular.module('myapp', ['ngSanitize']);

app.controller('AddCtrl', function ($scope, $compile) {

   		$scope.items = [];
        $scope.add_New = function (index) {
        var itemhtml = '<div ng-click="select()" class="content">//click here first// <div ng-repeat="item in items">{{$index + 1}}. {{item.name}}</div></div>';
        var item = $compile(itemhtml)($scope);
        angular.element(document.getElementById('drop')).append(item);
          };
        $scope.add = function () {
          $scope.items.push({ 
            name: "hi"
          });
        };
        $scope.select = function(){
          $scope.showItem = true;
        }
});

.add{
  position: absolute; height: auto; width: 200px; left: 0; right: auto; top: 0; bottom: 0;
}
.show{
  position: absolute; width: auto; left: 200px; right: 0; top: 0; bottom: 0;
    border:1px solid red;
float:right;
}
.content{
  border:1px solid blue;
}

<!DOCTYPE html>
<html ng-app="myapp">

<head>
          <link href="style.css" rel="stylesheet" type="text/css"/>

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
	<script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script>
</head>

<body ng-controller="AddCtrl">
	<div class="add"><button ng-click="add_New($index)">add Again</button>
    <div id="drop">
        </div>
      </div>
      <div ng-show="showItem" class="show">
          <div ng-repeat="item in items">
            {{$index + 1}}.<input type="text" ng-model="item.name">
            </div>
            <button ng-click="add()">Add</button>

          </div>
</body>

</html>

Answer 1

你需要改变你对html元素的思考方式。忘记jQuery并专注于角度方式。

首先，您不需要处理新的html元素。我们需要摆脱var itemhtml和$compile(itemhtml)。其次，您需要更改数据模型。

。 *此处更新*。

有关详细信息，请参阅更新的Plunker。

您的控制器将是这样的：

app.controller('AddCtrl', function ($scope, $compile) {

  $scope.itemGroups = [];

  $scope.addGroup = function () {
    $scope.itemGroups.push({ 
      items: []
    });
  };
  $scope.addItem = function (itemGroup) {
    itemGroup.items.push({ 
      name: "hi"
    });
  };
  $scope.editItemGroup = function (itemGroup) {
    $scope.selectedItemGroup = itemGroup;
  };
});

你的html应该像这样使用ng-repeat：

<div ng-repeat="itemGroup in itemGroups" class="add">
  <button ng-if="itemGroup != selectedItemGroup"
          ng-click="editItemGroup(itemGroup)">Edit</button>
  <div ng-repeat="item in itemGroup.items">
    {{$index + 1}}.<label ng-bind="item.name"></label>
  </div>
  <button ng-click="addItem(itemGroup)">Add</button>
</div>
<div ng-repeat="item in selectedItemGroup.items">
  {{$index + 1}}.<input type="text" ng-model="item.name">
</div>
<button ng-click="editItemGroup(null)" ng-if="selectedItemGroup">Done editing</button>

如何更改相同的ng-repeat值并仅显示选择值angularjs

1 个答案: