2016-01-20 17 views
5

Tôi mới tham gia AngularJS và hiện đang vật lộn với vấn đề sau.ng-thay đổi không hoạt động trên đầu vào

Như bạn có thể thấy here in my plnkr Tôi có thể thay đổi giá trị của $scope.myDate.value.

Vấn đề hiện tại là tôi không thể làm việc với phạm vi này trong một hàm, khi thêm ng-change="barFunc()" vào <input>.

Làm cách nào để hoạt động với ng-change hoặc ng-watch tại đây? Sẽ rất tuyệt nếu ai đó có thể làm cho công việc của tôi.

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

Trả lời

2

Bạn phải xác định $scope.custom trước bạn có thể truy cập vào $scope.custom.value

+0

Có! Xem cách làm việc [plnkr] (http://plnkr.co/edit/hKohYQSC5SG7ZF33qz45?p=preview). – herrh

2

Tôi sẽ sử dụng $ xem trong trường hợp này:

trong điều khiển của bạn:

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

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

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

hoặc trong plunkr

+0

Cảm ơn ví dụ ng-watch này;) – herrh

2

Bạn có thể thiết lập một quan sát như thế này:

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

});

nhưng bạn cũng sẽ cần phải xác định đối tượng tùy chỉnh của bạn:

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

và nó sẽ làm việc. Tôi không cảm thấy như thế này là giải pháp tốt nhất - tôi thường cảm thấy như tôi đang đặt người xem vì tôi không hiểu tại sao một cái gì đó không hoạt động như mong đợi thì tốt hơn là tìm ra lý do tại sao nó không hoạt động. Tôi nhận được đó là những gì bạn đang cố gắng làm, và tôi chỉ cung cấp điều này như một cái gì đó sẽ giải quyết vấn đề của bạn một cách nhanh chóng nếu đó là những gì bạn cần.

+0

trong trường hợp nó không rõ ràng trong câu trả lời của tôi ở trên - Tôi không biết tại sao ng-thay đổi không hoạt động ở đây, ngay cả sau khi bạn xác định đối tượng tùy chỉnh của bạn, và không có thời gian để tìm ra một. Sẽ được khá quan tâm để xem nếu có ai khác cung cấp một giải pháp cho một phần của vấn đề. –

Các vấn đề liên quan