Question

尝试使用angular＆amp; amp;的x可编辑：

我有一个添加用户表单，其中包含1个必需输入：“名称” 添加用户时有2个选项：
1.如果用户存在于$ scope.names中，我使用typeahead来显示选项列表 - ＆gt; OK
2.如果用户是新的（不在$ scope.names中），那么我应该有第二个必需的输入“Email”，我应该只在typeahead找不到我的“Name”输入

时显示它

这就是我被困住的地方......我真的不知道如何应用以下“原始”条件： 如果用户不在用户中 - ＆gt;显示电子邮件输入

非常感谢任何帮助！这里是 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

我会在作为电子邮件输入的范围中添加以下内容：ng-hide="shouldHide()"。

现在，shouldHide函数应始终从名称输入中获取值，并根据名称列表进行检查，如果找到则返回true，如果找不到则返回false。

希望这有帮助，没有时间在一个小提琴中嘲笑它。

[编辑]你可以找到我在$scope.investor.name中输入的名称的值，我从未使用过x-editable。

Answer 2

如前所述，您可以尝试获取输入值并检查是否存在于列表中，如果列表中的值不是，则将显示可选输入。

$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;
};

我把你的小提琴分开并在这里添加了解释的行为：http://jsfiddle.net/nachoorme/RZK9u/1/

AngularJS x-editable typeahead with conditional

2 个答案: