The same file in a ng-value implementation using AngularJS (1.6.1):

import angular from 'angular'

import {goods} from '../../../goods'

angular.module('dropdownapp')
  .component('dropdown', {
    template: `
      <div ng-class="{fruit: $ctrl.chosen.type === 'fruit', veggie: $ctrl.chosen.type === 'vegetable'}">
        I posit that 
        <select ng-model="$ctrl.chosen">
           <option ng-repeat="g in $ctrl.goods" ng-value="g">{{g.name}}</option>
        </select>
        {{$ctrl.chosen.quote}}
      </div>
    `,
    controller: class Clicker {
      $onInit () {
        this.goods = goods
        this.chosen = goods[0]
      }
    }
  })

visit this implementation
hide

The same file in a vanilla implementation using Angular (2.4.9):

import {Component} from '@angular/core';

import {goods} from '../../../goods.js'

@Component({
  selector: '#app',
  template: `
    <div [class.veggie]="chosen.type === 'vegetable'" [class.fruit]="chosen.type === 'fruit'">
      I posit that 
      <select [(ngModel)]="chosen">
        <option [ngValue]="g" *ngFor="let g of goods">
          {{g.name}}
        </option>
      </select>
      {{chosen.quote}}
    </div>
  `
})
export class Dropdown {
  goods = goods
  chosen = this.goods[0]
}

visit this implementation
hide

The same file in an es6 implementation using Cyclow (0.5.0):

import {Block} from 'cyclow'

import {goods} from '../../../goods'

const Dropdown = () => Block({
  on: {
    'in.init': () => state => ({goods, chosen: goods[0]}),
    'dom.select': index => state => ({...state, chosen: goods[index]})
  },
  view: ({goods, chosen}) => ({
    attrs: {className: {vegetable: 'veggie', fruit: 'fruit'}[chosen.type]},
    content: [
      'I postit that ',
      {
        tag: 'select',
        on: {change: (e, next) => next({select: e.target.selectedIndex})},
        content: goods.map(good => ({tag: 'option', content: good.name}))
      },
      ` ${chosen.quote}`
    ]
  })
})

export default Dropdown

visit this implementation
hide