如何更改相同的ng-repeat值并仅显示选择值angularjs [英] how to change same ng-repeat values and show only select values angularjs
问题描述
已更新 我想从显示的单个输入文本框中分别更改ng-repeat值， 我正在尝试将inputbox绑定到label，但是所有值都绑定在一起，您能告诉我如何仅更改选定的div值吗，我不想使用ng-repeat来添加值，请告诉我不使用ng-在开始时重复再次添加，您可以使用ng-repeat进一步的功能，应将表单显示在特定位置以更改输入框中的值以进行标记，您能帮我解决这个问题吗? 工作演示
UPDATED i want to change ng-repeat values separately, from shown single input text box, i'm trying to bind inputbox to label, but all values binding together, can u please tell me how to change only selected div values, i don't want to use ng-repeat to add values, pls tell me without using ng-repeat in start add again you can use ng-repeat further functions, form should be shown in certain position to change values in input box to label, can u pls solve this to me..?? 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>
推荐答案
您需要更改对html元素的思考方式.忘掉jQuery并专注于角度导航.
You need to change your way of thinking of html elements. Forget about jQuery and focus on angular-way.
首先，您不需要处理新的html元素.我们需要摆脱var itemhtml和$compile(itemhtml).其次，您需要更改数据模型.
First, you don't need to deal with new html elements. We need to get rid of that var itemhtml and $compile(itemhtml). Second, you need to change your data model.
. *在这里更新*.
有关详细信息，请参见更新的柱塞.
See updated Plunker for details.
您的控制器将是这样:
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:
And your html should make use of ng-repeat like that:
<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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
