2016-01-20 21 views
5

Jestem nowy w AngularJS i obecnie borykam się z następującym problemem.ng-change nie działa na wejściu

Jak widać here in my plnkr Mogę zmienić wartość $scope.myDate.value.

Problem polega na tym, że nie mogę pracować z tym zakresem w funkcji, dodając ng-change="barFunc()" do <input>.

Jak to jest pracować z ng-change lub lub lub ng-watch tutaj? Byłoby wspaniale, gdyby ktoś mógł sprawić, że mój pnkr będzie działał.

<!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>

Odpowiedz

2

Trzeba zdefiniować $scope.custom przed możesz Dostęp do $scope.custom.value

+0

Tak! Zobacz pracę [plnkr] (http://plnkr.co/edit/hKohYQSC5SG7ZF33qz45?p=preview). – herrh

2

użyłbym $ oglądać w tym przypadku:

w kontrolerze:

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

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

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

lub w plunkr

+0

Dzięki za ten przykład na Ng-watch;) – herrh

2

Mogłeś założyć obserwatora tak:

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

});

ale musisz również zdefiniować niestandardowego obiektu:

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

i powinno działać. Nie wydaje mi się, żeby to było najlepsze rozwiązanie - generalnie czuję, że jeśli ustawiam obserwatorów, ponieważ nie rozumiem, dlaczego coś nie działa zgodnie z oczekiwaniami, lepiej jest zrozumieć, dlaczego to nie działa. Rozumiem, że to właśnie próbujesz zrobić i oferuję to tylko jako rozwiązanie, które rozwiąże twój problem szybko, jeśli tego potrzebujesz.

+0

w przypadku, gdy nie jest to jasne w powyższej odpowiedzi - nie wiem, dlaczego zmiana ng tu nie działa, nawet po zdefiniowaniu własnego obiektu niestandardowego i nie ma czasu, aby ją wymyślić. Będzie bardzo zainteresowany, czy ktoś inny oferuje rozwiązanie tej części problemu. –

Powiązane problemy