在追加javascript后获取值ng-model

时间:2016-02-24 08:21:24

标签: javascript jquery angularjs



function add(){
var stre;
stre="Name: <input type='text' ng-model='Name'><br>"
+"Result Name: <input type='text' value={{Name}}>"
$("#test").append(stre);
}
&#13;
<!DOCTYPE html>
<html ng-app>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>

<div id="test">
<button type="button" onclick="add()">add</button><br>
</div>

</body>
</html>
&#13;
&#13;
&#13;

当我按添加按钮添加myform时出现问题。那么我想获得输入名称使用ng-model的价值。我使用附加形式添加下一个colomn。 可以帮我解决这个问题。抱歉mylanguage太糟糕了

1 个答案:

答案 0 :(得分:2)

  

使用ng-repeat代替append

ngRepeat指令从集合中为每个项目实例化一次模板。每个模板实例都有自己的范围,其中给定的循环变量设置为当前集合项。

var myApp = angular.module('myApp', []);
myApp.controller('myController', myController);

function myController($scope) {
  $scope.elements = [];
  $scope.add = function() {
    $scope.elements.push({});
  };

}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller='myController'>
    <div id="test">
      <div ng-repeat='elem in elements'>
        Name:
        <input type='text' ng-model='elem.name'>
        <br>Result Name:
        <input type='text' value={{elem.name}}>
        <hr>
      </div>
      <button type="button" ng-click="add()">add</button>
    </div>
  </div>
</div>

Fiddle here