[SOLUCIONADO] Cambiar datos de un elemento cuando selecciono una opción del select

[oliverarthurnardi]

Hola buenas Chic@s!

Me gustaría saber si alguien por aquí me puede explicar como puedo hacer. Que cuando seleccione una opción del select actualizo los datos que tengo en otro div.

Aquí dejo un link de Plunker donde tengo un ejemplo del código


Tambien dejo ejemplo del codigo por aqui:

HTML:

Código HTML:

<div class="container" ng-app="testApp">
    <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="selected.selectedItem" 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: {{selected.selectedItem}}</p>
            <p>Description: {{selectItem.variants.description}}</p>
            <p>ID product: {{selectItem.variants.id}}</p>
          </div>
        </div>
      </div>

    </div>
  </div> 

JS:

Código:

// Code goes here

(function() {

  'use strict';

  var app = angular.module('testApp', []);


  app.controller('testCtrl', ['$scope', '$log', function($scope, $log) {

    $scope.selected = {
      selectedItem: null
    };

    $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'
    }];

    $scope.watch('selected.selectedItem', function(newVal, oldVal){
        alert('cnange');
    }, true);

  }]);


})(window, angular);

[oliverarthurnardi]

Ya lo tengo resuelto!

Aqui es donde esta la magia!


<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>