JSFiddle - React, Tailwind, and code Playground

by StevenEvenSteven

HTML

<div ng-controller="myFiddle">
  <select multiple ng-change="showAlert(selectedValues)" ng-model="selectedValues">

    <!--TODO: find out why not working when reading values programatically as in above line-->
    <option value="1">{{resDatasIdOfMechanisms[0].name}}</option>
    <option value="2">{{resDatasIdOfMechanisms[1].name}}</option>
    <option value="3">{{resDatasIdOfMechanisms[2].name}}</option>
   </select>
</div>

JavaScript

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

fiddleApp.controller('myFiddle', ['$scope' function($scope) {

	$scope.selectedAlready = [{id:1, name:"Based on Antibiogram"}];
  $scope.selectedMechanisms=[];
  $scope.resDatasIdOfMechanisms = [{id:1,name:"Based on Antibiogram"}, {id:2,name:"Molecular"}, {id:3,name:"Genetic"}];
  $scope.selected = $scope.selectedAlready;
  $scope.selectedValues = [];
  $scope.$watch('selected', function(nowSelected){
    $scope.selectedValues = [];
    if( ! nowSelected ){
      return;
    }
    angular.forEach(nowSelected, function(val){
      $scope.selectedValues.push( val.id.toString());
      console.log("look");
    });
  });

  $scope.showAlert=function(listOfMultipleChoices){
    //alert(object);
  }}]);
  
  angular.bootstrap(document, ['fiddleApp']);