AngularJS'de nasıl farklı model ve görünüm gösteriliyor

AngularJS'de bir işlev yapıyorum. Kullanıcı 1.5 girdiğinde, Görünüşte, 01:30 olarak göstermelidir, ancak denetleyicide bu kapsam değerini getirdiğimde, 1.5 olarak dönmelidir. Plunker'a kod ekledim. Lütfen burada bulabilirsiniz.AngularJS'de nasıl farklı model ve görünüm gösteriliyor

Index.html:

<!DOCTYPE html> 
<html ng-app="wbTimeConverter"> 

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://code.angularjs.org/1.5.8/angular.js"></script> 
    <script src="script.js"></script> 
    <script src="wbNumberToTime.js"></script> 
</head> 

<body ng-controller="AppController"> 
    <h1>Hello Plunker!</h1> 
    <input type="text" md-maxlength="5" wb-number-to-time-convert ng-model="task" placeholder="task" ng-blur="onDataChange();" /> 

    <input type="text" md-maxlength="5" wb-number-to-time-convert ng-model="project" placeholder="project" ng-blur="onDataChange();" /> 

    <br> 
    <label>Task : {{task}}</label><br> 
    <label>Project : {{project}}</label><br> 
    <label>TotalResult : {{totalHours}}</label> 
</body> 

</html>

Denetleyici - script.js

var app = angular.module('wbTimeConverter', []); 

app.controller('AppController', function($scope) { 
    $scope.onDataChange = onDataChange; 

function onDataChange(){ 
    console.log("res"); 
    $scope.totalHours= parseFloat($scope.task) + parseFloat($scope.project, 10); 
} 


});

direktif: Burada

// 'use strict'; 
// /** 
// * This directive is convert number into hours and minutes format-HH:MM 
// * This will trigger when we change value in input element and gives respective value in time format 
// */ 

app.directive('wbNumberToTimeConvert', function ($filter, $browser) { 
    return { 
    require: 'ngModel', 
    link: function ($scope, $element, $attrs, ngModelCtrl) { 
     var listener = function() { 
     var value = $element.val(); 
     var result = convertToTime(value); 
     $element.val(result.timeFormat); 
     $element.attr('attr-hrs', result.decimalFormat); 
     }; 

     // This runs when we update the text field 
     ngModelCtrl.$parsers.push(function (viewValue) { 
     return viewValue; 
     }); 

     $element.bind('change', listener); 
     $element.bind('keydown', function (event) { 
     var key = event.keyCode; 
     // FIXME to handle validations 
     }); 

     $element.bind('paste cut', function() { 
     $browser.defer(listener); 
     }); 

     function convertToTime(value) { 
     var res = { 'timeFormat': '', 'decimalFormat': '' }; 
     var inputValue = value; 
     if (inputValue.indexOf(':') > -1) { 
      inputValue = convertToNumberFormat(inputValue); 
      res.decimalFormat = inputValue; 
     } else { 
      res.decimalFormat = value; 
     } 

     inputValue = inputValue.split('.'); 
     var hoursValue = inputValue[0]; 
     if (inputValue.length > 1) { 

      var hrs = parseInt(hoursValue, 10); 
      hrs = isNaN(hoursValue) ? 0 : hrs; 
      hrs = (hrs < 10) ? '0' + hrs : hrs; 

      var minutesValue = inputValue[1]; 
      var mins = parseInt(minutesValue, 10); 
      mins = (minutesValue.length < 2 && (mins < 10)) ? Math.round(mins * 6) : Math.round(mins * 0.6); 
      mins = (mins < 10) ? ('0' + mins) : mins; 
      inputValue = hrs + ':' + mins; 
      res.timeFormat = inputValue; 
     } else { 

      inputValue = (parseInt(inputValue, 10) < 10) ? '0' + parseInt(inputValue, 10) : parseInt(inputValue, 10); 
      inputValue = inputValue + ':' + '00'; 
      res.timeFormat = inputValue; 
     } 
     return res; 
     } 

     function convertToNumberFormat(inputValue) { 
     var timeValue = inputValue.split(':'); 
     var hours = parseInt(timeValue[0], 10); 
     var mins = parseInt(timeValue[1], 10); 
     if (isNaN(hours)){ 
      hours = '00'; 
     } 
     if (isNaN(mins)) { 
      mins = '00'; 
     } 
     mins = Math.round(mins/0.6); 
     if (mins < 10) { 
      mins = '0' + mins; 
     } 
     var number = hours + '.' + mins; 
     return number; 
     } 

    } 

    }; 
});

t o plunker linki: metin kutusu bulanıklık üzerinde https://plnkr.co/edit/76lwlnQlGC0wfjixicCK?p=preview

, bu değerin ince ilk kez ve metin kutusuna bulanıklık üzerinde ikinci kez View from ve Denetleyici farklılık çalışıyor, bu görünüm ve denetleyici hem de aynı değeri 01:30 gösteriyor . Bunu nasıl çözebilirim?

kaynak

2016-12-14 Ashok Gurram

Lütfen aslında ne yaptığınızı görmek için bir kod verin. – papakias

Lütfen bir kod yazınız. –

Sen ng-modeli myValue içine girişinizi tutmak ve

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.myValue = "1.5"; 
 
    $scope.format = function(value) { 
 
    var hrs = parseInt(Number(value)); 
 
    var min = Math.round((Number(value) - hrs) * 60); 
 
    return hrs + ':' + min; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 
    <input type="text" ng-model="myValue"> 
 
    <br>Formatted Value : {{format(myValue)}} 
 
    <br>Base value : {{myValue}} 
 
</div>

Sen denetleyici bir işlev bildirebilirsiniz

kaynak

2016-12-14 13:35:03 Weedoze

Evet, daha iyi bir seçenek ama yönergeyi kullanıyorum. Direktifi aramam lazım. –

@AshokGurram Direktifle çalıştığınızı söylemediniz. Bize mevcut kodunuzu göster – Weedoze

calucalted değeri döndürmek için gerekenleri görüntülemek için bir fonksiyonu format(value) çağırabilir ve html'de bu işlevi çağırabilir ve kapsam değişkenini iletebilirsiniz.

$scope.calculate = function(value){ 
    var calculatedValue = /*Your operation*/; 
    return calculatedValue; 
} 

<input type="text" ng-model="value"\> 
<p>{{calculate(value)}}</p>

o zaman hesapla değerini depolamak için başka kapsam değişkeni kullanabilirsiniz girdi değerine göre hesaplanan değerin gerçek zamanlı güncellemesini istiyorum.

$scope.calculate = function(value){ 
    $scope.calculatedValue = /*Your operation*/; 
} 

<input type="text" ng-model="value" ng-change="calculate(value)"\> 
<p>{{calculatedValue}}</p>

kaynak

2016-12-14 13:47:30

Bu yönergenin kullanımı gerçekten çok kolay! Bunu bir örnek olarak alın: JSFiddle

ngModelController gerektiren bir yönergeye sahipseniz, viewValue'yi gerçekten kolayca değiştirebilirsiniz.

ngModelController, ilgilenen iki özelliğe sahiptir: $ modelValue ve $ viewValue. $ modelValue, kapsamda kullandığınız değerdir ve $ viewValue, kullanıcının gördüğü değerdir.

ngModelController ayrıca bir modelValue değeriniValue olarak dönüştüren bir dizi biçimlendirici olan bir özelliğe sahip $ biçimlendiricilere de sahiptir. Dolayısıyla, modelValue, denetleyicinin tarafında değişirse, sonuna kadar biçimlendiricilerden geçecek ve bu, viewValue değerini değiştirecektir. Kendi biçimlendiricinizi oluşturmak istiyorsanız, diziyi eklemeniz yeterlidir!

//This formatter will convert the modelValue to display as uppercase in the viewValue 
ngModelController.$formatters.push(function(modelValue) { 
    if (modelValue) { 
     return modelValue.toUpperCase(); 
    } 
});

ama $ biçemleyicileri özellik yalnızca modelValue değişeceği zaman için çalışır, böylece kullanıcı giriş alanına şey yazmaya edilirse, viewValue, bu işlemek için en kolay yolu değiştirelim eklemek etmektir nVModel denetleyicisi tarafından sağlanan başka bir işlev kullanarak viewValue değiştireceğimiz onBlur olayı. $ setViewValue (value), viewValue değerini değiştirecek.Eğer yönergede viewValue değiştirirseniz, görünümü otomatik güncelleme olmayacak, bu yüzden sen this okuyabilir Bu konuda daha fazla bilgi için ngModelController

element.on('blur', function() { 
    ngModelController.$setViewValue(convertDoubleToTimeString(ngModelController.$modelValue)); 
    ngModelController.$render(); 
});

tarafından sağlanan $ işlemek işlevi çağırmak gerekir.

DÜZENLEME:

bir modelValue (1,5) için bir viewValue (1:30) dönüştüren bir ayrıştırıcı yazılı olmayan Bu örnekte

. Yani bir tane ekleyelim. Ayrıca $ ayrıştırıcıları dizinin üzerine bir updated JSFiddle

ngModelController.$parsers.unshift(function(viewValue) { 
    if (viewValue && viewValue.indexOf(':') < 0) { 
     return viewValue; 
    } else { 
     return convertTimeStringToDouble(viewValue) 
    } 
});

Unshifting ayrıştırıcıları var bu ha değil gerçekten gerekli, ama neden olmasın, yürütmek için ilk olacağı anlamına gelir?

viewValue değiştiğinde modelValue değişmiyor başka yolları da vardır, ama bu en doğru olandır.

Diğer bir seçenek $ setValue değerini $ setViewValue() yöntemine girmeden doğrudan ayarlamak olacaktır. Bu son satırında

//ngModelController.$setViewValue(ngModelController.$modelValue.toUpperCase()); 
ngModelController.$viewValue = ngModelController.$modelValue.toUpperCase();

, bu alışkanlık her ayrıştırıcıları ve doğrulayıcıları geçiyor olağan adımlarını, bu nedenle daha az ideal bir çözümdür.

kaynak

2016-12-14 14:24:02

Yukarıda sağlanan kemancı ile denedim. Bu sorunun bile aynı soruna neden olması. İlk bakışta, görünüm olarak 02:30 ve denetleyici olarak 2,5 olarak görüntülenir, ancak metin kutusunda düzenleme değeriyle, her iki denetleyicide de aynı değeri alıyorum ve "02:30" olarak görüntüledim. –

Bu sorunu çözmesi gereken bir düzenleme yaptım. –

AngularJS'de nasıl farklı model ve görünüm gösteriliyor

cevap

İlgili konular