2016-01-20 18 views
5

Ich bin neu in AngularJS und derzeit mit dem folgenden Problem zu kämpfen.ng-change funktioniert nicht am Eingang

Wie Sie sehen können here in my plnkr Ich kann den Wert der $scope.myDate.value ändern.

Das Problem ist jetzt, dass ich mit diesem Bereich in einer Funktion nicht arbeiten kann, wenn ng-change="barFunc()" zu <input> hinzugefügt wird. Wie ist es möglich mit ng-change oder ng-watch hier zu arbeiten? Es wäre toll, wenn jemand meinen PLNKR arbeiten könnte.

<!DOCTYPE html> 
 
<html ng-app="demo"> 
 
<head> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="//rawgithub.com/g00fy-/angular-datepicker/1.0.3/dist/index.css" rel="stylesheet"> 
 
    <style> 
 
     input {margin: 45px 0 15px 0;} 
 
     pre{padding: 15px; text-align: left;} 
 
    </style> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
      <div ng-controller="foo"> 
 
       <input type="datetime" class="form-control" date-time ng-model="myDate.value" 
 
        ng-change="barFunc()" format="yyyy-MM-dd hh:mm:ss" placeholder="Select datetime"> 
 
       <pre>myDate: {{myDate.value}}</pre> 
 
       <pre>myDate + " abc": {{ custom.value }}</pre> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script src="//code.angularjs.org/1.4.8/angular.js"></script> 
 
<script src="//rawgithub.com/g00fy-/angular-datepicker/1.0.3/dist/index.js"></script> 
 
<script> 
 
angular.module('demo', ['datePicker']).controller('foo',['$scope', function($scope){ 
 
    $scope.myDate = { 
 
     value: '' 
 
     }; 
 
     
 
    $scope.barFunc = function() { 
 
     $scope.custom.value = $scope.myDate.value + " abc"; 
 
    }; 
 
}]); 
 
</script> 
 
</body> 
 
</html>

Antwort

2

Sie $scope.custom definieren müssen, bevor Sie können Zugang zu $scope.custom.value

+0

Ja! Siehe Arbeiten [PLNKR] (http://pnnr.co/edit/hKohYQSCSC5SG7ZF33qz45?p=preview). – herrh

2

Ich würde $ in diesem Fall benutzen sehen:

in Ihrem Controller:

$scope.custom = { 
    value : '' 
}; 

$scope.$watch('myDate.value', function() { 
    $scope.barFunc(); 
}); 

$scope.barFunc = function() { 
    $scope.custom.value = $scope.myDate.value + " abc"; 
}; 

oder in plunkr

+0

Danke für dieses ng-watch Beispiel;) – herrh

2

Sie könnten einen Beobachter wie folgt aufgebaut:

$scope.$watch('myDate', function(oldValue, newValue) { 
$scope.barFunc(newValue); 

});

aber Sie werden auch Ihr benutzerdefiniertes Objekt definieren müssen:

$scope.custom = { 
    value: '' 
    }; 

und es sollte funktionieren. Ich habe nicht das Gefühl, dass dies die beste Lösung ist - ich habe generell das Gefühl, dass ich Beobachter einstellen kann, weil ich nicht verstehe, warum etwas nicht wie erwartet funktioniert. Dann ist es besser herauszufinden, warum es nicht funktioniert. Ich verstehe, dass Sie das versuchen und es nur als etwas anbieten, das Ihr Problem schnell löst, wenn Sie das brauchen.

+0

für den Fall, dass es in meiner Antwort oben nicht klar ist - Ich weiß nicht, warum die ng-Änderung hier nicht funktioniert, auch nachdem Sie Ihr benutzerdefiniertes Objekt definiert haben, und hatte nicht die Zeit, um diese herauszufinden. Es wird mich interessieren, ob jemand anderes eine Lösung für diesen Teil des Problems anbietet. –

Verwandte Themen