Question

我想从ng-show字段标签选项中更改附加字段的每个标签值，当我们点击附加字段时，它会显示字段标签选项。如何从单个字段标签选项中更改每个标签值？ you can go here for plunkr

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)"><label ng-bind-html="field.single"></label><input type="text" placeholder="Enter name" name="{{field.single}}"><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)">Single Line Text</button>
	<div id="drop"></div>

	<form ng-show="showSingle_Fieldsettings">
		<div class="form-group">
			<label>Field Label(?)</label>
			<br/>
			<input ng-model="field.single" class="fieldLabel">
		</div>
	</form>

</body>

</html>

Answer 1

当您添加新字段时，您将field.single绑定到该字段。在更新字段标题的输入字段中，您正在更新field.single，因此所有字段都具有相同的值。你想要的是拥有一个数组而不仅仅是一个变量。与field.single[0], field.single[1]等一样，并相应地更新每个。

Answer 2

很少有建议，

不要更改DOM（您在方法addNew_SingleField中执行此操作）。确保以这样的方式编写代码：当数据中存在数据时，DOM应该根据新的数据更改自行更新。
删除或删除元素（请参阅removeSingle）。这可以通过简单地删除模型中的数据来完成，该数据将以角度方式更新视图。
您对所有标签使用相同的field.single，这些标签最终会为所有标签提供相同的名称。从数组中获取名称。在下面的例子中，我根据索引值给出了标签名称。

<!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>
  <script>
    var app = angular.module('myapp', ['ngSanitize']);

    app.controller('AddCtrl', function($scope, $compile) {

      $scope.count = 0;

      $scope.items = [];


      $scope.click = function() {
        $scope.items.push({
          'name': $scope.count,
          'value': 'enter ' + $scope.count + ' value'
        });
        $scope.count++;
      };

      $scope.delete = function(index) {
        // console.log(index);
        $scope.items.splice(index, 1);
      }
    });
  </script>
</head>

<body ng-controller="AddCtrl">
  <button ng-click="click()">Single Line Text</button>

  <div>
    <table>
      <tbody>
        <tr ng-repeat='item in items'>
          <td>
            <label>{{item.name}}</label>
            <input type='text' value={{item.value}}>
            <button ng-click='delete($index)'>delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

angularjs如何更改分别附加每个文本值

2 个答案: