angularjs изменить добавленный текст каждое имя

0

Как изменить приложенные текстовые имена отдельно от одного поля ввода. Https://jsbin.com/lihamizuta/edit?html,js,output <- щелкните мой jsbin здесь один раз.. я полностью смущен этим событием, кто-нибудь может мне помочь..

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

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

    $scope.field = {single: 'untitled'};
    $scope.addNew_SingleField = function (index) {
        var singlehtml = '<fieldset id="single_field" ng-click="selectSingle($index)">//click me once// <label ng-bind-html="field.single"></label>  <input type="text" placeholder="Enter name"><button ng-click="removeSingle($index)">-</button></fieldset>';
        var single = $compile(singlehtml)($scope);
        angular.element(document.getElementById('drop')).append(single);
    };
    $scope.removeSingle = function (index) {
        var myEl = angular.element(document.querySelector('#single_field'));
        myEl.remove();
    };
    $scope.selectSingle = function (index) {
        $scope.showSingle_Fieldsettings = true;
    };
});
<!DOCTYPE html>
<html ng-app="myapp">

<head>
	<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">
	<button ng-click="addNew_SingleField($index)">Click me again</button>
	<div id="drop"></div>

	<form ng-show="showSingle_Fieldsettings">
		<div class="form-group">
			<label>Field Label name change here (?)</label>
			<br/>
			<input ng-model="field.single" class="fieldLabel">
		</div>
	</form>

</body>

</html>
  • 0
    Пожалуйста, объясните, что вы хотите сделать?
  • 0
    если мы нажимаем кнопку несколько раз, поля будут показаны ниже, если мы щелкнем в любом месте, где в полях будет отображаться опция метки поля, я хочу изменить имя метки «Без названия» отдельно от опции ввода метки одного показанного поля. меня
Теги:

1 ответ

1
Лучший ответ

Вы не следуете Угловому способу делать вещи - вы просто добавляете элементы jquery-style к странице вместо привязки к объекту модели. Это означает, что все в одной области, поэтому, когда вы меняете имя для одной строки, все строки обновляются.

Вам лучше создать массив в своей области, а затем привязать его к отображению строк с помощью ng-repeat и обновить его в вашем окне редактирования.

Обратите внимание, что когда мы добавляем новую запись в модель, мы не просто добавляем пустую строку, мы добавляем объект с свойством name ({name:''}). Это относится к проблеме передачи простых типов по областям - подробнее см. Этот ответ.

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

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

  // out array of names - we manipulate his instead of the HTML
  $scope.names = [];
  // this will store the name we are currently editing
  $scope.currentEdit = null;

  $scope.field = {
    single: 'untitled'
  };

  // add an entry to the array instead of cerating an element
  $scope.addNew_SingleField = function(index) {
    $scope.names.push({name: ''});
  };

  // remove the array entry at the chosen index
  $scope.removeSingle = function(index) {
    $scope.names.splice(index, 1);
  };

  // set currentEdit to the name object we are editing
  $scope.selectSingle = function(value) {
    $scope.currentEdit = value;
  };
});
<!DOCTYPE html>
<html ng-app="myapp">

<head>
  <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">
  <button ng-click="addNew_SingleField($index)">Click me again</button>
  <div id="drop">
    <!-- use ng-repeat to display the list of names -->
    <fieldset ng-repeat="n in names" id="single_field" ng-click="selectSingle(n)">//click me once//
      <label ng-bind-html="field.single"></label>
      <input type="text" ng-model="n.name" placeholder="Enter name">
      <button ng-click="removeSingle($index)">-</button>
    </fieldset>
  </div>

  <form ng-show="currentEdit">
    <div class="form-group">
      <label>Field Label name change here (?)</label>
      <br/>
      <input ng-model="currentEdit.name" class="fieldLabel">
    </div>
  </form>

</body>

</html>
Поделиться
  • 0
    Привет @Rhumbori .. ты дал mw отличное предложение, большое спасибо за твои усилия, но я уже пытался использовать ng-repeat, я получил результат, но у меня есть много разных типов полей, чтобы добавить к одному div, есть добавлять поля каждого типа одновременно ... если я использую ng-repeat в данных добавления, событие не работает должным образом,
  • 0
    Можете ли вы помочь мне сделать то же самое событие, изменив добавленные значения вместо использования функции push или ng-repeat ...
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню