Question

如何单独更改单个输入字段的附加文本名称.. https://jsbin.com/lihamizuta/edit?html,js,output＆lt; - 点击我的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>

Answer 1

您没有遵循Angular的做事方式 - 您只是将jquery-style元素附加到页面而不是从模型对象绑定。这意味着所有内容都在1个范围内，因此当您更改一行的名称时，所有行都会更新。

最好在示波器中创建一个数组，然后将其绑定以使用ng-repeat显示行，并在编辑框中更新它。

请注意，当我们向模型添加新条目时，我们不只是添加一个空字符串，而是添加一个具有name属性（{name:''}）的对象。这是为了处理跨范围传递简单类型的问题 - 有关详细信息，请参阅this answer。

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>

angularjs更改每个名称的附加文本

1 个答案: