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

how to change same ng-repeat values and show only select values angularjs

本文关键字：显示 angularjs 选择 何更改 ng      更新时间：2023-09-26

>更新我想从显示的单个输入文本框中分别更改 ng 重复值，我正在尝试将输入框绑定到标签，但是所有值都绑定在一起，您能否告诉我如何仅更改选定的div 值，我不想使用 ng-repeat 来添加值，请告诉我在开始使用 ng-repeat 的情况下再次添加您可以使用 ng-repeat 进一步的功能，表单应显示在某个位置以更改输入框中的值以标记， 你能给我解决这个问题吗..？？工作演示

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>

你需要改变你对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>
相关文章：