Anjularjss ng-options not working select
Question
I am trying to populate a select with some numbers using ng-options.This is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
p{
margin-top: 50px;
height:700px;
width: 1400px;
font-size:17px;
}
</style>
<script src="jscolor.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="editor">
<label for="kys_font_size"> font size:</label>
<select ng-model="kys_selected_font" id="fontsize" name="kys_font_size" ng-options="page for page in FontSize(1, 150)" ng-change="changeFont()">
Color: <input type="color" ng-model="ColorPicked">
</select>
<p contenteditable="true" id="content" >
</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('editor',function($scope){
$scope.color = "black";
$scope.selectedText = "";
$scope.FontSize = function(start, end) {
var size = [];
for (var i = start; i <= end; i++) {
size.push(i);
}
return size;
};
$scope.changeFont = function(){
var newSpan = "<span id='one' style='font-size:'"+$scope.kys_selected_font+"'> </span>"
$("#one").focus();
$("#content").append();
var spans = document.getElementsByTagName('span');
if($scope.selectedText!=""){
for( i=0;i < spans.length;i++){
for( j=0;j < selectedText.length;j++){
var id = spans[i].id;
var selectedId = $scope.selectedText[j].id;
var text = $("#"+id).clone().children().remove().end().text();
var fontSize = $("#"+id).css("font-size");
var selectedinnerText = $("#"+selectedId).clone().children().remove().end().text();;
if(fontSize == $scope.)
if(id === selectedId){
if(text === selectedinnerText){
if(fontSize == $scope.kys_selected_font){
}
else{
$("#"+id).css("font-size",10+"px");
}
}
else{
var replacer = document.getElementById(id);
var newElement = "<span style='font-size:10px;' id='one4'>"+selectedinnerText+"</span>";
replacer.innerHTML = replacer.innerHTML.replace(selectedinnerText,newElement);
}
}
}
}
}
};
$("span").mouseup(function(){
var range = window.getSelection().getRangeAt(0);
content = range.cloneContents();
var select = content.querySelectorAll('span');
$scope.selectedText = select;
});
});
</script>
</body>
</html>
Select is always empty.
1 answers
solution1
2 ACCPTED 2016-04-13 02:45:46
You haven't closed your controller. Add }); after your $scope.changeFont function.
Also, please format your code before posting a question. It's a nightmare to read for people trying to help you and it can help find issues like this.
EDIT
In your $scope.changeFont function you have this line if(fontSize == $scope.) . I presume you want it to be if(fontSize == $scope.FontSize) . I have changed it in the snippet below and the <select> is populated. Whether or not $scope.changeFont works as you intend, I don't know and it is outside of the scope of this question.
Additionally, in your HTML you have a <input> within a <select> which you need to move.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <style> p { margin-top: 50px; height: 700px; width: 1400px; font-size: 17px; } </style> <!--<script src="jscolor.js"></script>--> </head> <body> <div ng-app="myApp" ng-controller="editor"> <label for="kys_font_size">font size:</label> <select ng-model="kys_selected_font" id="fontsize" name="kys_font_size" ng-options="page for page in FontSize(1, 150)" ng-change="changeFont()"> </select> Color: <input type="color" ng-model="ColorPicked"> </div> <script> var app = angular.module('myApp', []); app.controller('editor', function($scope) { $scope.color = "black"; $scope.selectedText = ""; $scope.FontSize = function(start, end) { var size = []; for (var i = start; i <= end; i++) { size.push(i); } return size; }; $scope.changeFont = function() { var newSpan = "<span id='one' style='font-size:'" + $scope.kys_selected_font + "'> </span>" $("#one").focus(); $("#content").append(); var spans = document.getElementsByTagName('span'); if ($scope.selectedText != "") { for (i = 0; i < spans.length; i++) { for (j = 0; j < selectedText.length; j++) { var id = spans[i].id; var selectedId = $scope.selectedText[j].id; var text = $("#" + id).clone().children().remove().end().text(); var fontSize = $("#" + id).css("font-size"); var selectedinnerText = $("#" + selectedId).clone().children().remove().end().text();; if (fontSize == $scope.FontSize) if (id === selectedId) { if (text === selectedinnerText) { if (fontSize == $scope.kys_selected_font) { } else { $("#" + id).css("font-size", 10 + "px"); } } else { var replacer = document.getElementById(id); var newElement = "<span style='font-size:10px;' id='one4'>" + selectedinnerText + "</span>"; replacer.innerHTML = replacer.innerHTML.replace(selectedinnerText, newElement); } } } } } }; $("span").mouseup(function() { var range = window.getSelection().getRangeAt(0); content = range.cloneContents(); var select = content.querySelectorAll('span'); $scope.selectedText = select; }); }); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Select an Option in ng-options Not working with jQuery
AngularJs select ng-options not working
ng-change witing select with ng-options not working
Angular select and ng-options
AngularJS select / ng-options
ng-options with filter not working
Issue with <select ng-options=“…” />
Multiple ng-options set default option select not working
AngularJS ng-options, working with key value pairs in <select>
ng-options is not working with select dropdown of bootstrap via angular JS
Related Tags