Question

我可以用HTML格式制作angucomplete项目吗？（当然是angular.js）
我需要在selectedobject中添加什么内容？

尝试了这段代码但当然不能满足我的要求：

   <form class="form-horizontal" role="form" name="AddShareForm" novalidate ng-controller="AddArticleShareCtrl" ng-submit="AddShareForm.$valid && submit()">
        <div class="form-group">
            <label for="share-nick" class="col-xs-2 col-xl-2 control-label">User Nick</label>
            <div class="col-xs-10 col-xl-10">
                <angucomplete id="share-nick"
                              placeholder="User Nickname"
                              pause="100"
                              selectedobject="nick"
                              localdata="users"
                              searchfields="nick"
                              titlefield="nick"
                              minlength="1"
                              inputclass="form-control form-control-small"
                />
            </div>
        </div>
        <div class="form-group">
            <label for="share-content" class="col-xs-2 col-xl-2 control-label">Share content message</label>
            <div class="col-xs-10 col-xl-10">
                <input type="text" placeholder="content" id="share-content" ng-model="AddShareForm.content">
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10 col-xl-offset-2 col-xl-10">
                <button class="blue-button" type="submit" class="btn btn-default">Add</button>
            </div>
        </div>
    </form>

Answer 1

经过一段时间的努力，我找到了anguautocomplete

的出色工作解决方案

简而言之，selected-object可以用作“对象”，您可以使用title-field属性来指定隐含的内容

$scope.selectedObjectName.titleFieldValue

或者，selected-object也可以用作回调函数，如下所示，作为参考，我还将发布HTML的一面，以便与JS保持同步。

<div angucomplete-alt id="idOfDiv" placeholder="" pause="400" selected-object="selectedObjectName" remote-api-handler="searchApiToCallForAutoCompleteOtions" remote-url-data-field="data" title-field="titleFieldValue" minlength="1" input-class="form-control form-control-small" initial-value="valueHoldingModel" match-class="highlight" field-required="false" input-name="anguCompleteFieldName" input-changed="anguCompleteInputChanged" ></div>

进入实现，它在JS中的样子......

$scope.selectedObjectName = function(selected){
if(selected){
  $scope.valueHoldingModel = selected.originalObject;
  $scope.$broadcast('angucomplete-alt:changeInput', idOfDiv, valueDisplay); 
  //you could have set with $scope.toWhereverYouWant = $scope.valueHoldingModel (warning below)
  //All other things you want to update/do while its selected-object is created
}else{
  $scope.valueHoldingModel = null; //This is if you want to clear the "non-selected" from angucomplete option, the object.
}

公平警告，$ scope.valueHoldingModel如果用于移动到另一个模型后立即打破，不知道为什么我有这种经验。我的意思是：$scope.iWantValuesHere = $scope.valueHoldingModel

此外，允许我们对Angucomplete输入保持更大控制的强大功能是input-changed属性，它允许我们保留像......这样的函数。

$scope.anguCompleteInputChanged = function(str){
 console.log(str)
 if((str){
  $scope.valueHoldingModel.titleFieldValue = str; //More likely want to do.
  //and Anything else you want to do
 }else{
  $scope.valueHoldingModel = {} //This is somewhere you dont want to get, but will help fix if your object is undefined, following the first select "breaking" 
  $scope.valueHoldingModel.titleFieldValue = str;
 }
}

解释了大部分的运行...这就是调用anguComplete选项下拉选项的远程API将被称为

$scope.searchApiToCallForAutoCompleteOtions = function(userInputString,timeoutPromise){
        return $http.post('http://my.domain.com:80/api/domain_block/api_specific/',{search_value: userInputString,token: $rootScope.user.token},{timeout: timeoutPromise});
    }

Answer 2

您应该能够将其绑定到

selectedobject="AddShareForm.whatever"

如果这不起作用，那么我会添加一个隐藏的输入：

<input type="hidden" ng-model="whatever">

然后将所选对象设置为ng-model的所有内容：

selectedobject="whatever"

Answer 3

您只需指定ng-model即可。 http://plnkr.co/edit/q65Uyl?p=preview

为了说清楚，我添加了一个提交功能：

$scope.submit = function() {
  alert('About to submit [' + $scope.content + '] as ' + $scope.nick.title);
}

还将昵称附加到消息字段：

<div class="form-group">
    <label for="share-content" class="col-xs-2 col-xl-2 control-label">Share content message</label>
    <div class="col-xs-10 col-xl-10">
        <input type="text" placeholder="content" id="share-content" ng-model="content"> by <span>{{nick.title}}</span>
    </div>
</div>

如果您想要更多功能，请尝试angucomplete-alt http://ghiden.github.io/angucomplete-alt/

表格中的angucomplete

3 个答案: