如何将输入文本中的名称绑定到标签

时间:2016-01-12 09:40:42

标签: javascript jquery angularjs

如何将显示的单个文本框中的值绑定到标签值? 如果我在这个问题中使用ng-repeat我面临着进一步功能的问题......请你解决这个问题吗?我无法在他们之间进行约束...... Working DEMO



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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我已更新您的代码,这是一个正常工作的版本:

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>