Split <input type="text"> using Angular.js

Question

Happy day everyone,

I have started to work on angular-seed project. I have found jsfiddle with TODO example and would like to add another <input type-"text">

Is there any ways to split <input type-"text"> to make it look like two <input type-"text"> in the same row? My idea is similar to this jsfiddle made with jQuery, where merged string should be added to the <li> element

many thanks,

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

You don't want to make it "look like" two inputs, you actually use 2 inputs and change your array of strings to an array of objects with only slight changes in the view.

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

View

<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