Anjularjss ng选项不工作选择
Anjularjss ng-options not working select
我正在尝试使用ng-options用一些数字填充select。这是我的代码:
<!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始终为空。
您尚未关闭控制器。在$scope.changeFont
函数后添加});
。
此外,在发布问题之前,请格式化您的代码。对于那些试图帮助你的人来说,这是一场噩梦,它可以帮助你发现这样的问题。
编辑
在$scope.changeFont
函数中,有一行if(fontSize == $scope.)
。我想你希望它是if(fontSize == $scope.FontSize)
。我在下面的代码段中对其进行了更改,并填充了<select>
。$scope.changeFont
是否按您的意愿工作,我不知道,它不在这个问题的范围内。
此外,在HTML中,您需要移动<select>
中的<input>
。
<!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>
相关文章:
- 为什么不'在JQuery中找到第二个css选择器的工作
- jQuery选择器无法正常工作
- JavaScriptDOM正常工作时JQuery选择器不工作
- 点击选择Div不在IE上工作
- jquery鼠标选择无法正常工作
- 谷歌表单-根据分配给谷歌应用程序的工作为商业用户预先填充多项选择列表
- JS-颜色选择器只有第一个工作
- Javascript字母选择没有'我不能在谷歌浏览器上工作
- 取消光谱颜色选择器不工作
- Jquery选择选项并获取只工作一次的更改值(页面加载时)
- 复杂选择器在jQuery 1.8中中断,但在1.7.2中工作
- jQuery选择器在脚本中不起作用,但在控制台中工作
- 如何使 html 选择选项在 Meteor 中工作
- 当页面回发ASP.NET时,时间选择器javascript将停止工作
- 添加Jquery验证后,Jquery日期选择器无法工作
- 复选框选择/取消选择触发器第一次工作,但在随后的尝试中失败
- Anjularjss ng选项不工作选择
- IE8: element:first-child不能工作(选择我实际想要的父元素)
- Jquery代码不能与Internet explorer一起工作-选择框选项基于另一个选择框
- 将工作选择元素添加到现有表中