Beste Weg, um klare Modell Werte, wenn das Feld ausgeblendet in eckige

Nachfolgend finden Sie einige code, um klare eckige Modell Werte, wenn der entsprechende input zu dem Modell ausgeblendet wird per ng-show, mit Klassennamen und jquery, aber es hat einen schlechten Geruch bc-manipuliert DOM-controller (Bearbeiten - es muss nicht das DOM manipulieren ändert es die Oszilloskop-Modell Werte, aber ich bin nicht verrückt, die unter Verwendung von jquery) . Gibt es eine "Winkel-Weg" zu tun?

Sollte ich hinzufügen, dass der code unten ist nur für ein proof of concept zu zeigen, dass eine Lösung möglich ist. Das aktuelle Projekt hat eine sehr komplizierte Geschäftsregeln, um zu zeigen, Abschnitte, Unterkapitel und Unterabschnitte usw., die viele logische Filialen... so wäre es schwierig, die code-Logik in der Uhr, da @Dev schlägt... außerdem würde ich nicht wollen, um die Logik an zwei Orten: sowohl in allen divs, die haben ein-und ausblenden UND in einer Funktion ...

    <!doctype html>
<html  xmlns:ng="http://angularjs.org" ng-app="app">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">  


</head>

<body ng-controller="MainCtrl">

    <div style="padding:20px; background-color:silver;color:blue">{{person | json }}</div>  

    Name: <input ng-model="person.name" name="name" >

    <div ng-show="person.name.length">

        Age: <input ng-model="person.age" name="age" class="hide-clear">

        <div ng-show="person.age.toString().length">
            Hobby: <input ng-model="person.hobby" name="hobby" class="hide-clear">
        </div>

    </div>

    <Script>

        angular.module('app', [])

        .controller('MainCtrl', function($scope,$log,$timeout){             

            $scope.person = {
                name: 'mr smith',
                age: 51,
                hobby: 'coding'                 
            }   

            $scope.$watchCollection(
                //return the value to be watched
                function($scope){ 
                    return $scope.person
                },
                //function to be called when changed
                function(newValue,oldValue){
                    $timeout( function() {  
                        $(".hide-clear").each(function(){
                            var t = $(this);                            
                            if( !  t.is(":visible") ) {
                                $scope.person[t.attr('name')] = '';
                            }
                        })

                    })
                }               
            )           
        })

    </Script>
</body>
</html>

InformationsquelleAutor gabriel | 2015-07-28

  1. 4

    Ich bin froh, dass Sie erkannte den Ansatz von oben, wie ein schlechtes design (oder "schlechten Geruch", wie du es ausgedrückt hast). In der Tat, ein Winkel-Weg (oder allgemein, eine MVVM-Weise) wäre, nur die Ansicht manipulieren Modell, und lassen Sie das View-Model-Laufwerk die Anzeigen.

    Zum Beispiel, Sie versuchen $scope.person.age = "" und $scope.person.hobby = "" wenn der übergeordnete container ist verborgen mit ng-show="person.name.length" (d.h. wenn $scope.person.name leer ist). Anstelle der Verwendung der daraus resultierenden Unsichtbarkeit der container als Indikator, verwenden Sie die ursprünglichen Daten, die den container unsichtbar zu sein in den ersten Platz.

    $scope.$watch("person.name", function(val){
  if (val === "") { //or, if (!val.length), to make it completely equivalent
    $scope.person.age = "";
    $scope.person.hobby = "";
  }
});

    Den obigen code Uhren für $scope.person.name leer zu sein (und/oder undefined, was Ihre definition ist) , legen Sie die anderen Eigenschaften. Es spielt überhaupt keine Rolle, der controller, wie der View reagiert auf leere person.name überhaupt - könnte es haben schon einige Animationen oder andere UI-tricks. Die Logik befasst sich nur mit dem View-Model-Zustand.

    Den obigen code weiter verbessert werden könnte zu vermeiden $watch und stattdessen auf das Ereignis reagieren, verursacht $scope.person.name, leer zu werden. Aus deinem Beispiel es erscheint nur veranlasst, wenn der Benutzer das löschen der Namen aus der textbox.

    <input ng-model="person.name" ng-change="onPersonChanged()">
    $scope.onPersonChanged = function(){
   if (!$scope.person.name) {
      $scope.person.age = "";
      $scope.person.hobby = "";
   }
};

    Dies ist vorzuziehen $watch seit $watch feuert auf jeden digest-Zyklus, in der Erwägung, dass ng-change feuert nur, wenn es eine änderung in das Eingabefeld.

    Diese Antwort ist vorzuziehen, denn es arbeitet innerhalb das AngularJS-framework.

    InformationsquelleAutor New Dev

Schreibe einen Kommentar