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

Question

大家開心，

我已經開始從事角種子項目。 我找到了jsfiddle和TODO示例，並想添加另一個< input type-"text">

有什么方法可以拆分< input type-"text">使其看起來像是同一行中的兩個<input type-"text"> ？ 我的想法類似於用jQuery制作的jsfiddle ，其中應將合並的字符串添加到<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);
    }
}

Answer 1

您不想讓它看起來像兩個輸入，實際上您使用了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