在自动完成标记上使用ng-scope的Angucomplete-alt

Question

I have a form with an input tag where I want to use auto-complete, user is allowed to enter a name and auto-complete suggestions appear as user enters name characters.

My problem is what if user doesn't want to use the auto-complete names and wish to use a custom name how do I get access to this in my controller.

I am not able to set ng-model on this input tag as it is managed internally by the angucomlete-alt .

I have this autocomlete-alt tag in ng-repeat.

<div ng-repeat="resident in vm.residents">

    <div class="form-group">
    <label class="col-lg-2 col-sm-2 control-label">Name</label>
        <div class="col-lg-6">
            <angucomplete-alt 
                placeholder="Name"
                pause="100"
                selected-object="residentSelected" 
                search-fields="name"
                title-field="name"
                minlength="1"
                remote-api-handler="searchApi"
                remote-url-response-formatter="searchResponseFormatter"
                input-class="form-control form-control-small"
                match-class="highlight"
                clear-selected="true">
        </div>
    </div>
</div>

Further my requirement is to set fields of the selected object on other input tags which are below name field how can I set the fields on resident(iterator) via model binding.

I am not able to set ng-model on augucomplete-alt so that it reflects on resident(iterator) of ng-repeat.

My aim is to be able to assign/bind values to resident from the angucomplete tag itself.

Can anyone help me thanks in advance.

Answer 1

Well you simply need to do is this ....

           <angucomplete-alt 
            placeholder="Name"
            pause="100"
            selected-object="residentSelected" 
            search-fields="name"
            title-field="name"
            minlength="1"
            remote-api-handler="searchApi"
            remote-url-response-formatter="searchResponseFormatter"
            input-class="form-control form-control-small"
            match-class="highlight"
            clear-selected="true"
            override-suggestions="true"/>

override-suggestions="true" : this attribute overrides your selection and set your selected-object attribute to the custom input you type in the field.

Here's the documentation for it Link

Answer 2

Use override-suggestions. Take a look at this example 4

http://ghiden.github.io/angucomplete-alt/#example4

Here is a working example with ng-repeat

http://plnkr.co/edit/6IiUul?p=preview

$scope.residentSelected = function(selected) {
  if (selected.originalObject.name) {
    $scope.vm.residents[this.$parent.$index].name = selected.originalObject.name;
  } else {
    console.log('overriding selection');
    $scope.vm.residents[this.$parent.$index].name = selected.originalObject;
  }
}