Update data from drop down list

Question

Update data from drop down list

1.4k views Asked by AudioBubble At 13 June 2015 at 19:01

How can I update the content of another element when a selection is made from a drop down list?

I want to update:

the description fields,
price and ID in the block details.

Here is the link of plunker I created with the code (must manually navigate to version dated Jun 13, 2015 2:49:35 PM), which is also in the following snippet.

(function() {

  'use strict';

  var app = angular.module('testApp', []);
  
  
  app.controller('testCtrl', ['$scope', function($scope) {
    
    
    $scope.variants = [{
      'id': 'p-12345',
      'url': 'section/food/product/p-12345',
      'title': 'Product 1',
      'price': '£21.15 - 21x15',
      'description': 'lorem ipsum dolor'
    }, {
      'id': 'p-12366',
      'url': 'section/food/product/p-12366',
      'title': 'Product 2',
      'price': '£11.15 - 10Kg',
      'description': 'lorem ipsum dolor'
    }, {
      'id': 'p-12364',
      'url': 'section/food/product/p-12364',
      'title': 'Product 3',
      'price': '£67.15 - 60Kg',
      'description': 'lorem ipsum dolor'
    }];


  }]);


})(window, angular);

<!DOCTYPE html>
<html ng-app="testApp">

<head>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body>

  <div class="container">
    <h4>Select one product!</h4>
    <div class="row" ng-controller="testCtrl">
      
      <div class="col-md-4">
        <div class="form-group">
          <select id="selectVariant" ng-model="selectItem" class="form-control">
            <option selected="selected" disabled="disabled">Choose one product...</option>
            <option ng-repeat="variant in variants" value="{{variant.url}}">{{variant.title}}</option>

          </select>
        </div>
        <input type="hidden" value="{{variants.id}}">
        <div class="form-group">
          <button class="btn btn-danger">Add to cart</button>
        </div>
      </div>

      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-body">
            <h4>Details:</h4>
            <p>Price: {{selectItem.variants.price}}</p>
            <p>Description: {{selectItem.variants.description}}</p>
            <p>ID product: {{selectItem.variants.id}}</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</body>

</html>

Original Q&A

There are 1 answers

**AudioBubble** · Answer 1 · 2015-06-14T13:56:01+00:00

Problem solved!!! :) :)

I've updated the code in Plunker... In case anyone has the same problem.

I only had to change this:

<div class="form-group">
   <select id="selectVariant" ng-model="selectItem" class="form-control">
      <option selected="selected" disabled="disabled">Choose one product...</option>
      <option ng-repeat="variant in variants" value="{{variant.url}}">{{variant.title}}</option>
   </select>
</div>

To this:

<div class="form-group">
  <select id="selectVariant" ng-model="productSelect" ng-options="product as product.price for product in variants track by product.url" class="form-control">
     <option selected="selected" disabled="disabled">Choose one product...</option>
  </select>
</div>

(function() {

  'use strict';

  var app = angular.module('testApp', []);
  
  
  app.controller('testCtrl', ['$scope', function($scope) {
    
    
    $scope.variants = [{
      'id': 'p-12345',
      'url': 'section/food/product/p-12345',
      'title': 'Product 1',
      'price': '£21.15 - 21x15',
      'description': 'lorem ipsum dolor'
    }, {
      'id': 'p-12366',
      'url': 'section/food/product/p-12366',
      'title': 'Product 2',
      'price': '£11.15 - 10Kg',
      'description': 'lorem ipsum dolor'
    }, {
      'id': 'p-12364',
      'url': 'section/food/product/p-12364',
      'title': 'Product 3',
      'price': '£67.15 - 60Kg',
      'description': 'lorem ipsum dolor'
    }];


  }]);


})(window, angular);

<!DOCTYPE html>
<html ng-app="testApp">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body>

  <div class="container"  ng-controller="testCtrl">
    <h4>Select one product!</h4>
    <div class="row" >

      <div class="col-md-4">
        <div class="form-group">
          <select id="selectVariant" ng-model="productSelect" ng-options="product as product.price for product in variants track by product.url" class="form-control">
             <option selected="selected" disabled="disabled">Choose one product...</option>
          </select>
        </div>
        <input type="hidden" value="{{productSelect.id}}">
        <div class="form-group">
          <button class="btn btn-danger">Add to cart</button>
        </div>
      </div>

      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-body">
            <h4>Details:</h4>
            <p>Price: {{productSelect.price}}</p>
            <p>Description: {{productSelect.description}}</p>
            <p>ID Product: {{productSelect.id}}</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</body>

</html>

TechQA.

Update data from drop down list

There are 1 answers

Related Questions in ANGULARJS

Related Questions in SCOPE

Related Questions in ANGULARJS-NG-REPEAT

Related Questions in ANGULAR-SERVICES

Popular Questions

Popular Tags

Trending Questions