CODEWITHSUNDEEP
angularjs
David_Garcia
David_Garcia

Reputation: 654

Propagate a Select with angularJS and read the option

I have a problem to read the information selected that is propagate in a select.

<div ng-show="deviceDetail != null" ng-model="example" >
    <select >
        <option value="NONE">Select</option>
        <option ng-repeat="option in deviceDetail" ng-change="selectOption()">{{option}}</option>
    </select>
    <br/>
    The value of the selection is: {{example}}
  </div>

this is the HTML code and in the {{example}} I want to see the information that the user selected.

this is the part of the js releted: 

$scope.selectOption = function() {
        $scope.example = option.productName;
    };

How I can fix it?

Thanks a million!

Upvotes: 0

Views: 93

Answers (4)

Prash
Prash

Reputation: 21

You should use ng-options
The value of the selection is: {{example}}

Upvotes: 1

Satyam Koyani
Satyam Koyani

Reputation: 4274

Set your example scope variable directly in <select> instead calling ng-change event and assigning into that function.

You can directly set option.name to example model with the use of ng-options too.

Here You have applied ng-model directive to div tag.

<div> is not input element so apply ng-model to <select> element here.

I would suggest to use ng-options directive for filling the selection list in <select>. ng-repeat is also fine.

Here you are binging ng-change event so in the function if requires then you can pass the object on which event is triggering so you can use that object or perform any operation on that.

Below is the modified template.

<div ng-show="deviceDetail != null">
    <select >
        <option value="NONE">Select</option>
        <option ng-model="example" ng-options="option in deviceDetail" ng-change="selectOption(option)">{{option}}</option>
    </select>
    <br/>
    The value of the selection is: {{example}}
</div>

Upvotes: 1

Reena
Reena

Reputation: 1119

Try this: 

<div ng-show="deviceDetail != null">
  <select >
    <option value="NONE">Select</option>
    <option ng-model="option" ng-options="option in deviceDetail" ng-change="selectOption(option)">
    {{option}}</option>
</select>
<br/>
   The value of the selection is: {{example}}

Js: 

         $scope.selectOption = function(option) {
         $scope.example = option;
       };

Upvotes: 1

YD1m
YD1m

Reputation: 5895

You should to pass current option:

<select >
        <option value="NONE">Select</option>
        <option ng-repeat="option in deviceDetail" ng-change="selectOption(option )">{{option}}</option>
    </select>

$scope.selectOption = function(option) {
        $scope.example = option; // is there property .productName?;
    };

Upvotes: 1

Related Questions