个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
我是 AngularJS/Ionic 的新手，我正在尝试检测输入类型 =“范围”的值的变化，并根据此值在 js 中执行操作。
但我不确定如何检测它:$watch 还是 ng-change？
代码如下:HTML:
<html ng-app="SnowBoard">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Checkboxes</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="ComputeCtrl">
<ion-content>
<div class="range">
<input id="levelrange" type="range" min="0" max="10" value="5" name="userlevelofsurfing" ng-model="levelvalue" ng-change="setLevelText()">
{{levelvalue}}
</div>
<div id="leveldisplay">
</div>
{{testvariable}}
</ion-content>
</body>
</html>
JS:
angular.module('SnowBoard', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.browse', {
url: "/browse",
views: {
'menuContent' :{
templateUrl: "templates/compute.html",
controller: 'ComputeCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/playlists');
})
.controller('ComputeCtrl', function($scope, $ionicPopup, $timeout) {
$scope.data = {
levelvalue: 5,
level1wordDescription: "INTERMEDIATE+",
testvariable: "dummy"
}
$scope.$watch('data.levelvalue', function(newVal, oldVal) {
console.log('data.levelvalue is now '+newVal);
console.log('data.levelvalue is now '+data.levelvalue);
});
$scope.setLevelText = function(rangeValue) {
console.log('range value has changed to :'+$scope.data.levelvalue);
$scope.data.testvariable = $scope.data.levelvalue;
}
});
最佳答案
您可以使用其中任何一种，但在这种情况下我建议使用 ngChange。当您正在观看输入时，ngChange 通常是最佳选择。您应该最小化 $scope.$watch 表达式以提高性能，在这种情况下，它会复制 ngChange 已经处理的内容。移除 $watch。
您的问题出在 ng-model 中。您没有正确引用它，当您的模型实际上是 data.levelvalue 时，您有 levelvalue。我还删除了 value="5" 属性，因为 ngModel 会处理这个问题并且它会妨碍您。
<input id="levelrange" type="range" min="0" max="10" name="userlevelofsurfing" ng-model="data.levelvalue" ng-change="setLevelText()">
关于javascript - $watch 或 ng-change，检测范围输入的 onchange 并根据值进行处理，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27077769/
29
4
0
当我构建 2 个下拉菜单并从数据库中填充它们时，当从第一个下拉菜单中选取一个值时，会创建第二个下拉菜单。但是，当我在第二个选项中选择一个选项时，我的 ajax 正在执行。但是当我在第二个下拉列表中只有
所以我有一个用户脚本来解析页面并创建一个选择框并用选项填充它。 现在我想在用户更改选择框上的选定索引时调用脚本。不幸的是，用户脚本看起来只运行一次，并且无法读取选择上的 future 更改。 我试过:
我有一个文件选择器，当点击按钮时，文件选择器出现: 现在我想使用另一个按钮来执行此操作，触发上面的输入: { var element = document.getElementById('
有两种方法可以在 React 应用程序中获取输入更改。 一种是使用 另一个是 ... 什么时候应该使用第一个，什么时候应该使用另一个。 最佳答案 之所以有两种方式，是因为方式不止这两种。您
当子组件的 select 元素更改时，我尝试做两件事 - 更新子状态(用于显示更多字段以及其他特定于子项的决策等)， 调用传入 props 的父处理程序。 只有第一个可以工作，如何添加第二个？正确的方
我创建了一个显示用户输入结果的自定义搜索应用程序。在应用程序中，我为用户提供了一种控制显示的结果数量的方法。 HTML 10 25 50 100 jQuery $(
我有一个带有多个选项的选择元素，如下所示: .. .... .. 我正在使用 django (不知道这是否真的很重要..)并且在 select 标记的 onChange 事件中我应
我有一个使用的 xsl 页面 在 onchange 事件中 onchange="updateDropdown({$pos});someElement_{$pos}.value = {$pos}";
我试图根据条件清除 onChange 事件中选择的值。它是否已经存在于选定的列表中。但是我无法使用 清除该值$select[name][0].selectize.clear(); 来自 onChang
我正忙于自学 FXML。我通过关注 this 来做到这一点示例。 这是一个简单的文本编辑器。但是，在本教程中，一切都是 Java 代码。 我自己正在使用 FXML 来分离逻辑 View 。 我目前
我在jsp页面中有如下代码... 如果我在 a4j 中使用 event="onchange" 它不会调用我的 generatePrescriptionQuantity 但如果我使用 event
我的页面上有一堆输入元素。每个输入元素都有一个 onchange 事件，该事件会触发对服务器的 ajax 调用。我想禁用所有这些 onchanges，然后对元素进行一些编程更改(重置它们)，然后重新启
我有这个代码: $(document).ready(function(){ var country; $('#selectCountry').on('change', function (e)
我有这段代码: 但它并没有按照我想要的方式运行。当我离开盒子时它会运行该函数，我想每次该输入字段的内容发生变化时都执行该操作，我该怎么做？ (我正在尝试为用户输入创建一个建议框)。 我也尝试过 jq
我有一个绑定(bind)到更改事件的选择，以便在进行选择时将用户带到新页面。鼠标没问题，但是当我尝试使用键盘的箭头键进行选择时，更改事件会在我按下箭头时立即触发，而不是等待我跳出，所以我只能选择第一个
所以我已经为此工作了大约一天......我有一个表单，其中有一个选择菜单，其选择会触发另一个相关的选择菜单。 此时我要做的是根据第二个选择菜单中的选择填写一个默认值。基本上，如果用户在 Labor 菜
我在 jQuery 中有一个 input text 我想知道是否可以获取该 input text 的值(type=number和 type=text) 在 onchange 发生之前，并且在 onch
简介我在 create-react-app 应用程序中有一个用户输入元素。它允许用户键入数字，或使用箭头向上或向下递增数字。然后输出显示该数字。 问题用户想要达到某个数字，无论他们如何输入数字，都会有
这个问题已经有答案了: val() doesn't trigger change() in jQuery (11 个回答) 已关闭 7 年前。 我有一个选择列表。 Toyota Subaru Fia
所以我的工作场所在一个组件内使用一个 SelectField，该组件在多个地方使用。说得通。现在，当我在当前正在开发的组件中使用该组件时。我创建的 onChange 事件未传递正确完成所需的值。现在，
我是一名优秀的程序员,十分优秀！