Как обновить из «ввода» фактическое видимое «значение» на странице с помощью AngularJS

Question

Как обновить из «ввода» фактическое видимое «значение» на странице с помощью AngularJS

0

У меня возникают проблемы с установкой значения вида некоторых полей ввода, которые заполняются программно:

когда он пуст, скрипт добавляет "0";
если число> 360, сценарий устанавливается на "360".

<p>
    <span style="color: #81a0ff; font-size: 3em; font-weight: bold;">
        &alpha; = {{angle1}}&deg;
    </span>
</p>
<input type="text" id="ang_1" maxlength="3" 
    onfocus = "this.value = parseInt(value) || ''"
    onblur = "this.value = parseInt(value) || '0'" 
    onkeyup="this.value = minmax(this.value, 0, 360) || 0"
    ng-model="angle1"
    ng-init="angle1='0'" >

function minmax(value, min, max)
{
    if (parseInt(value)== 0 || parseInt(value)== 00 || parseInt(value)== 000 )
        return 0;
    if(parseInt(value) < min)
        return 0;
    else if(parseInt(value) > max)
        return 360;
    else return value = parseInt(value);
}

Как я могу исправить эту проблему?

Maxwell717 25 сен. 2015, в 14:51

Источник

1

Поместите свое решение в jsfiddle.net
Niezborala 25 сен. 2015, в 12:32
0

Что это за this.value в HTML? И является ли minmax глобальной функцией?
ryanyuyu 25 сен. 2015, в 12:38
0

Я считаю, что ваша проблема в том, что AngularJS не знает, как обновить, так как ваш minmax является глобальной функцией, которая живет за пределами Angular. Посмотрите на эту скрипку, я просто перенес вашу функцию в контроллер ввода. , Данные обновляются на размытие с использованием углового ngBlur .
jnthnjns 25 сен. 2015, в 12:43
0

Вы можете создать собственную директиву AngularJS, которая могла бы обрабатывать все это и на глобальном уровне и позволять вам проходить любую минимальную комбо комбинацию.
jnthnjns 25 сен. 2015, в 12:44
0

Я не совсем понял, чего ты хочешь достичь. minmax возвращает 0 или 360 , вы должны вернуть value+0 чтобы добавить 0 когда ваше значение меньше, чем min . Также parseInt("value") автоматически обрезает нули (см. Это ). Не могли бы вы немного улучшить?
OneZeroOne 25 сен. 2015, в 12:46
0

Проблема в отображении видимого в данный момент входного значения. Я печатаю «999», скрипт исправляет его до «360», но angular продолжает показывать «999» в h1tag вместо 360, который корректно отображается в поле ввода.
Maxwell717 25 сен. 2015, в 13:00
0

использовать номер типа ввода
Daniel A. White 25 сен. 2015, в 13:02
0

Существует проблема с отображением текущего видимого значения тега ввода с помощью angularjs
Maxwell717 25 сен. 2015, в 13:06

Показать ещё 6 комментариев

Теги:

javascript

html

angularjs

1 ответ

Ещё вопросы

Что это за this.value в HTML? И является ли minmax глобальной функцией?
Я считаю, что ваша проблема в том, что AngularJS не знает, как обновить, так как ваш minmax является глобальной функцией, которая живет за пределами Angular. Посмотрите на эту скрипку, я просто перенес вашу функцию в контроллер ввода. , Данные обновляются на размытие с использованием углового ngBlur .
Вы можете создать собственную директиву AngularJS, которая могла бы обрабатывать все это и на глобальном уровне и позволять вам проходить любую минимальную комбо комбинацию.
Я не совсем понял, чего ты хочешь достичь. minmax возвращает 0 или 360 , вы должны вернуть value+0 чтобы добавить 0 когда ваше значение меньше, чем min . Также parseInt("value") автоматически обрезает нули (см. Это ). Не могли бы вы немного улучшить?
Проблема в отображении видимого в данный момент входного значения. Я печатаю «999», скрипт исправляет его до «360», но angular продолжает показывать «999» в h1tag вместо 360, который корректно отображается в поле ввода.
Существует проблема с отображением текущего видимого значения тега ввода с помощью angularjs

Maxwell717 · Accepted Answer · 2015-09-26T14-06-00.000Z

Здесь это решение моей проблемы:

   http://jsfiddle.net/MTfRD/2207/

В результате: скрипт исправляет число в соответствии с функцией minmax (последний должен находиться в контроллере), а угловое изображение отображает видимое значение поля ввода.
Спасибо всем за помощь и особенно за Asok за подсказку.
HTML

<div ng-app="DispAngleApp"  ng-controller="AppCtrl as app">
<p><span class="alfa">&alpha; = {{angle1}}&deg;</span></p>
<input type = "text" 
        id = "ang_1"
        maxlength = "3"
        onfocus = "this.value = parseInt(value) || ''"
        onblur = "this.value = parseInt(value) || '0'"
        ng-change = "minmax(angle1, 0, 360) || 0"
        ng-model = "angle1"
        ng-init = "angle1='0'" ><br>
<p><span class = "beta">&beta; = {{angle2}}&deg;</span></p>
<input type = "text"
        id = "ang_2"
        maxlength = "3"
        onfocus = "this.value = parseInt(value) || ''"
        onblur = "this.value = parseInt(value) || '0'"
        ng-change = "minmax2(angle2, 0, 360) || 0"
        ng-model = "angle2"
        ng-init = "angle2='0'"><br>

AngularJS:

var myApp = angular.module('myApp',[]); function AppCtrl($scope) {
$scope.minmax = function (value, min, max) {
    if (value == '')
        return $scope.angle1 = 0;
    if (parseInt(value) == 0 || parseInt(value) == 00 || parseInt(value) == 000)
        return $scope.angle1 = 0;
    if (parseInt(value) < min)
        return $scope.angle1 = 0;
    else if (parseInt(value) > max)
        return $scope.angle1 = 360;
    else return $scope.angle1 = parseInt(value);
};
$scope.minmax2 = function (value, min, max) {
    if (value == '')
        return $scope.angle2 = 0;
    if (parseInt(value) == 0 || parseInt(value) == 00 || parseInt(value) == 000)
        return $scope.angle2 = 0;
    if (parseInt(value) < min)
        return $scope.angle2 = 0;
    else if (parseInt(value) > max)
        return $scope.angle2 = 360;
    else return $scope.angle2 = parseInt(value);
};
$scope.change_val = function (value){
    var va = value;
    va = va.replace(/^\[\'|\'\]$/g,'').split("', '");
    $scope.angle1 = va[0];
    $scope.angle2 = va[1];
} } function change_val(el){
var ang_1 = document.getElementById("ang_1");
var ang_2 = document.getElementById("ang_2");
var v = el.value;
v = v.replace(/^\[\'|\'\]$/g,'').split("', '");
ang_1.value = v[0];
ang_2.value = v[1];}