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.
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
Post a Comment