AngularJS x-editable typeahead with conditional

Question

trying to achieve the following behaviour with angular & x-editable:

I have an Add User form with 1 required input: "Name".
When adding a User there are 2 options:
1. If the User exists in the $scope.names I use typeahead to display the option list -> OK
2. If the User is new (not in $scope.names) then I should have a second required input "Email" and I should only display it when typeahead finds no match for my "Name" Input

And this is where I'm stuck... I don't really know how to apply the following "raw" condition: if user is not in users -> show Email Input

Any help would be much appreciated!
Here is the JSfiddle!

<div  ng-app="app">
    <div ng-controller="InvestorsController">   
        <ul>
            <li ng-repeat="investor in investors">  
                <span href="#" editable-text="investor.name" e-placeholder="Name" e-name="name" e-form="investorsForm" e-typeahead="name for name in names | filter:$viewValue | limitTo:8" e-required>
                    {{ investor.name || 'empty' }}
                </span>
                <form editable-form name="investorsForm" ng-show="investorsForm.$visible" class="form-buttons form-inline" shown="inserted == investor">
                    <button type="submit" ng-disabled="investorsForm.$waiting" class="btn btn-primary sx-btn-ok">OK</button>
                    <button type="button" ng-disabled="investorsForm.$waiting" ng-click="investorsForm.$cancel()" class="btn btn-default">X</button>
                </form>
                <div class="buttons" ng-show="!investorsForm.$visible">
                    <button class="btn btn-primary" ng-click="investorsForm.$show()">OK</button>
                    <button class="btn btn-danger" ng-click="removeInvestor($index)">X</button>
                </div>
            </li>
            <button class="" ng-click="addInvestor()">Add Investor</button>
        </ul>
    </div>
</div>

Answer 1

As said previously, you could try to get the input value and check if exists in list, if the value isn't in the list the optional input will be shown.

$scope.shouldHide = function(index) {
    //get the typeahead input value:
    var nameInput = document.getElementsByName('name')[0]
    var nameValue = null
    if (nameInput){
      nameValue=document.getElementsByName('name')[0].value;
    }

    if (nameValue){
    //check if typeahead input value is in list
    $scope.names = ['User 1', 'User 2', 'User 3', 'User 4', 'User 5', 'User 6'];
       return $scope.names.indexOf(nameValue) >=0
    }   
    return true;
};

I fork your fiddle and added the explained behaviour here: http://jsfiddle.net/nachoorme/RZK9u/1/

Answer 2

I would add something along the lines of: ng-hide="shouldHide()" in the span that is the email input.

Now, the shouldHide function should always grab the value from the name input and check it against the names list and return true if found and false if not found.

Hope this helps, didn't have the time to mock it up in a fiddle sorry.

[Edit] You find the value of the name input in the $scope.investor.name as far as I can figure, I never worked with x-editable.