拆分<input type =“text”>使用Angular.js

快乐的一天每个人，拆分<input type =“text”>使用Angular.js

我已经开始在angular-seed项目上工作。我发现jsfiddle with TODO example和想补充的另一个< input type-"text">

有分裂< input type-"text">，使它看起来像两个<input type-"text">同一行中的任何方式？我的想法是与此类似jsfiddle made with jQuery，其中合并字符串应该被加入到<li>元素

千恩万谢，

app.html

<div ng-controller="MyCtrl"> 
     <input type="text" ng-model="enteredName" /> 
     <button ng-click="addName()">Add</button> 
     <ul> 
      <li ng-repeat="name in names"> 
       {{ name }} 
       <button ng-click="removeName(name)">&times;</button> 
      </li> 
     </ul> 
    </div>

app.js

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

function MyCtrl($scope) { 
    $scope.names = ['batman', 'grumpy', 'yulu']; 

    $scope.addName = function(){ 
     $scope.names.unshift($scope.enteredName); 
    } 

    $scope.removeName = function(name) { 
     var i = $scope.names.indexOf(name); 
     $scope.names.splice(i, 1); 
    } 
}

来源

2017-04-09 o.O

看到这个http://stackoverflow.com/questions/32470928/angular-formly-adding-form-fields-dynamically-on用户点击/ 35603088＃35603088 –

你会这样做它完全一样的方式在JSFiddle中完成。创建两个输入字段。 – JJJ

你不想让它“看起来像”两个输入，实际上您使用2个输入并将您的字符串数组更改为一个对象数组，只在视图中进行轻微更改。

$scope.names = [{first: 'bat',last: 'man'}];

查看

<input type="text" ng-model="enteredName.first" /> 
<input type="text" ng-model="enteredName.last" /> 
<button ng-click="addName()">Add</button> 
<ul> 
    <li ng-repeat="name in names"> 
     First: {{ name.first }} Last: {{ name.last }} 
     <button ng-click="removeName(name)">&times;</button> 
    </li> 
</ul>

DEMO

来源

2017-04-09 10:36:38 charlietfl

你刚刚钉上它！非常感谢m8 –

拆分<input type =“text”>使用Angular.js

回答

相关问题