CODEWITHSUNDEEP
angularjs
Anita
Anita

Reputation: 2400

Set default value in angucomplete

I am using angucomplete-alt to show dropdown search. Its working fine.But in one case I want to set its value from controller. I tried 

 $scope.selectedCustomer.title = $scope.customerList[1].businessName

& also 

$scope.selectedMerchant = $scope.merchantList[1]

But the both didn't work. In the angucomplete-alt documentation its written that there is two way binding. Can any one help me out in displaying default selection..

Upvotes: 5

Views: 8377

Answers (5)

shreyas
shreyas

Reputation: 63

We need to pass object reference instead of string to initial-value.

<angucomplete-alt id="selectProductTypeName" 
                                placeholder="Search Product Type" 
                                pause="100" 
                                selected-object="vm.selectedProductType" 
                                local-data="vm.productTypeNameList" 
                                initial-value="vm.initialProductType" 
                                search-fields="name" class="angu-form-control" 
                                title-field="name" 
                                minlength="3" 
                                input-class="form-control form-control-small">
                            </angucomplete-alt>

initial value in the controller should be

vm.initialProductType = { name: response.data[0].product_type};

Upvotes: 0

Dixander Carballo Buque
Dixander Carballo Buque

Reputation: 13

Try this on your controller:

$scope.example = {
    text: 'Somethings'
};

On initial-value of angucomplete-alt:

initial-value="example.text"

Upvotes: 1

Dhruv Gupta
Dhruv Gupta

Reputation: 19

The answer is quite late but I recently came across angucomplete-alt. I suggest is to use native JS combined with angucomplete-alt.

You can use clear-selected="true" provided by angucomplete-alt and set a timeout of about 200 ms and update your input's value taking its id:

The clear-selected="true" will clear your input on selection and then you can change the input's value from controller.

document.getElementById('ex1_value').value = 'customValFromController';

I used this while I wanted to set something different in the search textbox from what was displayed in the dropdown result list.

Worked for me :) .

Upvotes: 0

Anand Rockzz
Anand Rockzz

Reputation: 6658

I was using angucomplete-alt along with ui-bootstrap's modal I tried a lot, ended up doing this:

$timeout(function(){
    $scope.$broadcast('angucomplete-alt:changeInput', 'myType', myTypeVal);
}, 200);

..and the html was

<angucomplete-alt id="myType" placeholder="My Type"
                    pause="400" selected-object="myTypeSelectedFn"
                    remote-url="/searchMyType"
                    remote-url-request-formatter="searchMyTypeFn"
                    search-fields="name" title-field="code"
                    input-class="form-control form-control-small"
                    match-class="angucomplete-highlight"
                    name="myType" minlength="1" field-required="true"
                    field-required-class="alert-danger"
                    text-searching="Fetching.." auto-match="true" 
                    ng-model="modifiedMy.type"/>

Upvotes: 5

Brett Smith
Brett Smith

Reputation: 3052

Not sure if you ever found an answer to this but I thought I would share how I achieved this.

<angucomplete-alt id="owner"
placeholder="[email protected]"
pause="400"
selected-object="subscription.EmailAddress"
initial-value="{{subscription.EmailAddress}}"

Initial value accepts a string value, using angular syntax I was able to generate this from the controller using curly brackets.

Hope this helps.

Upvotes: 7

Related Questions