更改模型时更改变量

时间:2016-04-11 16:46:15

标签: angularjs

我有两个模型,每个输入字段一个。我有一个输出数据的控制器。在该控制器内部,我定义了合并这两个输入模型的新变量。但是,该变量在模型更改时不会发生变化。当其中一个模型发生变化时,如何更新该变量?

这是我全球控制人的一部分:

$http.get('/dates').then(function(response){
  $scope.years = response.data.years
  $scope.months = []
  for (var i = 0; i < 12; i++) {
    $scope.months.push(response.data.months[i])
  }
});

这是我要观看的模型视图:

  <div class="input-dual">
    <div class="input-dual-inner">
      <span>Datum polaska:</span>
      <select ng-model="selectedYear" ng-options="year as year for year in years">
      </select>
    </div>
    <div class="input-dual-inner">
      <span style="opacity: 0; cursor: default">.</span>
      <select ng-model='selectedMonth' ng-options='month as month.name for month in months'>
      </select>
    </div>
  </div>

这是控制器,应该注意变化并指定新模型:

AppControllers.controller('DataOutput', [
  '$scope','$http',
   function($scope, $http){
     $scope.selectedDate = $scope.selectedYear + "-" + $scope.selectedMonth
   }
]);

2 个答案:

答案 0 :(得分:3)

尝试使用$ watch。像这样:

@Override
    protected Dialog onCreateDialog(int id) {
        switch (id) {
            case TIME_DIALOG_ID:

                // set time picker as current time
                return new TimePickerDialog(this, timePickerListener, hour, minute,
                        false);
        }
        return null;
    }

    private TimePickerDialog.OnTimeSetListener timePickerListener = new TimePickerDialog.OnTimeSetListener() {

        @Override
        public void onTimeSet(TimePicker view, int hourOfDay, int minutes) {
            // TODO Auto-generated method stub
            hour   = hourOfDay;
            minute = minutes;
            updateTime(hour,minute);
        }
    };

答案 1 :(得分:3)

你有两种方法可以实现这个目标

第一种方法

您可以在两个模型上添加watch

var createDate = function(newValue, oldValue) {
    $scope.selectedDate = $scope.selectedYear + "-" + $scope.selectedMonth
};

$scope.$watch("selectedYear", createDate);
$scope.$watch("selectedMonth", createDate);

第二种方法

ng-change元素

使用select
<div class="input-dual">
    <div class="input-dual-inner">
        <span>Datum polaska:</span>
        <select ng-model="selectedYear" ng-change="createDate()" ng-options="year as year for year in years">
        </select>
    </div>
    <div class="input-dual-inner">
        <span style="opacity: 0; cursor: default">.</span>
        <select ng-model='selectedMonth' ng-change="createDate()" ng-options='month as month.name for month in months'>
        </select>
    </div>
</div>

并在控制器中添加此代码

$scope.createDate = function() {
    $scope.selectedDate = $scope.selectedYear + "-" + $scope.selectedMonth
};

检查此plnkr链接以获取参考https://plnkr.co/edit/8179tojufhGMj5SbUujJ?p=preview