Question

如何将显示的单个文本框中的值绑定到标签值？如果我在这个问题中使用ng-repeat来解决我的进一步功能问题，那么你可以解决这个问题。我无法在他们之间进行约束.... Working DEMO

＆＃13;

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope, $compile) {
  $scope.my = {name: 'untitled'};
  var counter=0;
  $scope.add_Name = function(index) {
    var myName='untitled'+counter;
    var namehtml = '<label ng-click="selectName(\''+myName+'\')">'+myName+' //click<br/></label>';
    var name = $compile(namehtml)($scope);
    angular.element(document.getElementById('add')).append(name);
    ++counter;
  };

  $scope.selectName = function(val) {
    
    $scope.my.name=val;
    $scope.showName = true;
  };
});

＆＃13;

<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <button ng-click="add_Name($index)">Add Names</button>
	<div id="add"></div><br/>

	<form ng-show="showName">
      <label>Name Change(?)</label><br/>
	  <input ng-model="my.name">
	</form>
  </body>

</html>

＆＃13;

Answer 1

我知道这是有效的...但我不想使用ng-repeat，为什么因为如果我在div中使用ng-repeat保存的表单中的名称没有显示添加的名称，如果我添加名称再次添加了多个名字，这是我面临的主要问题，所以你可以帮助我而不使用ng-repeat如何更改每个附加名称.. ???

＆＃13;

var app = angular.module('myapp', ['ngSanitize']);

app.controller('AddCtrl', function($scope, $compile) {
$scope.names = [];
  $scope.currentEdit = {};
$scope.add_Name = function(index) {
    $scope.names.push({name: 'untitled'});
  };
  $scope.selectName = function(n) {
    $scope.currentEdit = n;
  };
});

＆＃13;

<!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="add_Name($index)">Add Names</button>
  <div id="drop">
    <fieldset ng-repeat="n in names" ng-click="selectName(n)">//click//
      <label ng-bind-html="n.name"></label>
    </fieldset>
  </div>

  <form ng-show="currentEdit">
      <label>Field Label name change here (?)</label>
      <br/>
      <input ng-model="currentEdit.name" class="fieldLabel">
   </form>

</body>

</html>

＆＃13;

Answer 2

我已经更新了我的代码，这是一个工作版本，最后我得到了结果：

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope, $compile) {
  $scope.my = {name: 'untitled'};
  $scope.mies=[]; // added an array to store the generated values
  var counter=0;
  $scope.add_Name = function(index) {
    $scope.mies[counter]={name: 'untitled'+counter}; // insert a new object into the array
    var namehtml = '<label ng-click="selectName(mies[\''+counter+'\'])">{{mies['+counter+'].name}} //click<br/></label>';
    var name = $compile(namehtml)($scope);
    angular.element(document.getElementById('add')).append(name);
    ++counter;
  };

  $scope.selectName = function(val) {
    
    $scope.my=val; // set my to val instead of my.name
    $scope.showName = true;
  };
});

<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <button ng-click="add_Name($index)">Add Names</button>
	<div id="add"></div><br/>

	<form ng-show="showName">
      <label>Name Change(?)</label><br/>
	  <input ng-model="my.name">
	</form>
  </body>

</html>

如何将文本框之间的名称绑定到标签

2 个答案: