Get selected option from select with angular JS and ionic

Question

I have some issues with select on angular Js, I searched a lot and found some solutions but not working.

I have a Json Structured like that generated from my service.php

[
    {
        "Name": "Name1",
        "Variante": [
            {
                "Prix": "79.00",
                "Name": "20 Piéces"
            }
        ],
        "Description": "",
        "main_image": "images/products/DSC_0192.jpg"
    },
    {
        "Name": "NAME2",
        "Variante": [
            {
                "Prix": "39.00",
                "Name": "250g"
            },
            {
                "Prix": "60.00",
                "Name": "500g"
            }
        ],
    "Description": "",
    "main_image": "images/products/DSC_0125.jpg"
    }
]

Here is my controller.js

.controller('productsCtrl', function($scope, $http, $stateParams) {
    $http.get('service.php')
    .success(function (response) {
        $scope.products = response;
    });
});

Here is my products.html

<ion-view view-title="Products">
    <ion-content>
        <ion-list>
            <ion-item style="background-image: url({{product.main_image}})" 
            ng-repeat="product in products" class="productListItem">
                <h2 class="h2Name">{{product.Name}}</h2>

                <button class="button button-balanced button-right">
                    <i class="icon ion-ios-cart"></i>
                </button>

                <select class="Variantes" 
                    ng-if="product.Variante.length > 1" 
                    ng-model="selectedItem"
                    ng-options="variant.Name for variant in product.Variante">
                </select>

                <h2 class="Variantes" ng-if="product.Variante.length == 1">
                    {{product.Variante[0].Name}}
                </h2>
                <h2 class="h2Price" ng-if="product.Variante.length > 1">
                    {{selectedItem.Prix}}
                </h2>
                <h2 class="h2Price" ng-if="product.Variante.length == 1">
                    {{product.Variante[0].Prix}}
                </h2>

            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

If I have more than one VarianteI want to be able to change the price (Prix) value when I change the select box. But it doesn't work.

Any help needed !!

Thanks

score 1 · Accepted Answer · answered Sep 09 '15 at 20:46

1

The issue you have is due to the ng-if. It creates a separate scope, use ng-show instead cause it uses the same scope and your code should work perfectly.

answered Sep 09 '15 at 20:46

Diana R

1,174
1
9
23

Thanks a lot, it works but how can I hide the blank options from the select box ? I have tried this ` $scope.selectedItem= $scope.product.Variante[0].Name; ` on the controller, no result. – ben Sep 09 '15 at 20:55
use ng-init on select like this: – Diana R Sep 09 '15 at 20:58
You need to initialize the selectedItem with the json object not a property of the json because the selected item is going to be the entire product json, not only the string displayed as option. – Diana R Sep 09 '15 at 20:59
Thank @Diana it works fine. But I didn't get your second comment – ben Sep 09 '15 at 21:01
I was explaining why ng-init should use the product.Variante[0] and not product.Variante[0].Name you tried to use in controller. – Diana R Sep 09 '15 at 21:02
Ah okay, it's fine. Thanks again :) – ben Sep 09 '15 at 21:03
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/89197/discussion-between-abennouna-and-diana-r). – ben Sep 09 '15 at 21:06

score 1 · Answer 2 · edited May 23 '17 at 12:22

Using ng-show would work but you could also use ng-if if you're taking care of the dot rule for ng-model.

If you would add your selectedItem to the product object your markup with ng-if will work as expected. Your ng-model for the select would be like ng-model="product.selectedItem".

Please have a look at the demo below or in this jsfiddle.

var jsonData = [
    {
        "Name": "Name1",
        "Variante": [
            {
                "Prix": "79.00",
                "Name": "20 Piéces"
            }
        ],
        "Description": "",
        "main_image": "images/products/DSC_0192.jpg"
    },
    {
        "Name": "NAME2",
        "Variante": [
            {
                "Prix": "39.00",
                "Name": "250g"
            },
            {
                "Prix": "60.00",
                "Name": "500g"
            }
        ],
    "Description": "",
    "main_image": "images/products/DSC_0125.jpg"
    }
];

angular.module('demoApp', ['ionic'])
.controller('productsCtrl', function($scope, $http, $stateParams) {
    $scope.product = {
        selectedItem: {}
    };
    //$http.get('service.php')
    //.success(function (response) {
      //http just removed for the demo
        $scope.products = jsonData;//response;
    //});
});

<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.js"></script>
<link href="http://code.ionicframework.com/1.1.0/css/ionic.css" rel="stylesheet"/>
<ion-view ng-app="demoApp" ng-controller="productsCtrl" view-title="Products">
    <ion-content>
        <ion-list>
            <ion-item style="background-image: url({{product.main_image}})" 
            ng-repeat="product in products" class="productListItem" ng-init="product.selectedItem = product.Variante[0]">
                <h2 class="h2Name">{{product.Name}}</h2>

                <button class="button button-balanced button-right">
                    <i class="icon ion-ios-cart"></i>
                </button>

                <select class="Variantes" 
                    ng-if="product.Variante.length > 1" 
                    ng-model="product.selectedItem"
                    ng-options="variant.Name for variant in product.Variante">
                </select>
                <h2 class="Variantes" ng-if="product.Variante.length == 1">
                    {{product.Variante[0].Name}}
                </h2>
                <h2 class="h2Price" ng-if="product.Variante.length > 1">
                    {{product.selectedItem.Prix | currency}}
                </h2>
                <h2 class="h2Price" ng-if="product.Variante.length == 1">
                    {{product.Variante[0].Prix | currency}}
                </h2>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

Thanks, it works fine. Can you just explain me what is the difference between ng-if and ng-show ? — ben, Sep 09 '15 at 21:23
`ng-if` removes the html element from the DOM if expression is falsy and `ng-show` is only hiding the content but keeps the markup in DOM. As a rule of thumb, use `ng-if` if it changes only on page load and `ng-show` when the user changes it more often. So ng-show would be better for your price info. Also have a look at this [SO question](http://stackoverflow.com/questions/21869283/when-to-favor-ng-if-vs-ng-show-ng-hide). — AWolf, Sep 09 '15 at 21:31

Get selected option from select with angular JS and ionic

2 Answers2