javascript - 使用 Angular.js 拆分 <input type ="text">

Question

祝大家快乐

我已经开始从事 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);
    }
}

Answer 1

您不想让它“看起来像”两个输入，您实际上使用了 2 个输入并将您的字符串数组更改为对象数组， View 中只有轻微的变化。

 $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