javascript - ng-repeat works with <p>, <ul><li>, etc, but fails on select using exact same source -


part of app populate list of common phone , tablet models based on mobile os choice shown here:

<div class="input-field col s3">                 <label class="active">environment (os)</label>                 <select ng-model="environment" ng-change="listbrowsers()">                     <option value="" disabled>select os</option>                     <option ng-repeat="os in oses">{{os}}</option>                 </select>             </div> 

and snippet of $scope.listbrowsers() context (from controller)....

$scope.listbrowsers = function() {     $scope.browsers = machinedataservice.getbrowsers($scope.environment);     $scope.browser1 = null;     $scope.notmobile(); //calls function determine mobile-ness     $scope.getmobiledevices($scope.environment);     return $scope.browsers; } 

next 'getmobiledevices' scope function calls named service method:

this.getmobiledevices = function(envt) {     var devicelist = [];     (i=0; < _devices.length; i++) {         if (_devices[i].versions.indexof(envt) > -1) {             devicelist.push(_devices[i].name);         }     }     return devicelist; 

}

but problem comes in resulting changes view:

this works --

<div class="input-field col s6">                 <label class="active">phone/tablet model:</label>                 <p ng-repeat="device in mobiledevices">{{device}}</p></div> 

this doesn't:

<div class="input-field col s6><select ng-model="mobiledevicetype">                     <option value="" disabled selected>choose device...</option>                     <option ng-repeat="device in mobiledevices" value="{{device}}">{{device}}</option>                 </select></div> 

in fact, replacing select radio buttons worked -- same source!

n.b. admit may missing -- angular still new me. pardon use of materialize rather angular material -- i'll rewrite later use angular material, didn't know of existence @ start.

edit -- illustrate point, here's screenshot of result paragraph using repeater, , select using ng-options instead.

sample-with-ngoptions sample-with-paragraph-ngrepeat

interestingly worked me here ! took same snippet code have provided , made demo , it's working fine.can check if doing same ?

although have syntax error in provided code <div class="input-field col s6><select ng-model="mobiledevicetype">

change <div class="input-field col s6"><select ng-model="mobiledevicetype"> missed " @ end of class attribute

var adminpage = angular.module("adminpage", []);  adminpage.controller('adminpage1', function($scope, $http, $window) {          $scope.mobiledevices = ['apple', 'htc', 'samnsung', 'one plus'];    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="adminpage" ng-controller="adminpage1" class="input-field col s6">    <select ng-model="mobiledevicetype">      <option value="" disabled selected>choose device...</option>      <option ng-repeat="device in mobiledevices" value="{{device}}">{{device}}</option>    </select>  </div>


Comments

Popular posts from this blog

java - SSE Emitter : Manage timeouts and complete() -

jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -