0

私の例では、ユーザーがテキストフィールドにフォーカスしたときにモデルを更新したいと考えています。つまり、「px」文字列を既存の値に追加します。

HTML:

<div ng-app>
  <div ng-controller="PixelCtrl">
  <div>
  {{pixel}}
  </div>
    <input type="text" ng-focus="updatePX($event)" ng-model="pixel" />
  </div>
</div>

JS:

function PixelCtrl($scope) {
  $scope.pixel = "120";

  $scope.updatePX = function(e){
  debugger;
   alert(e.target.value);
    e.target.value = e.target.value + "px";
    $scope.$apply();
  }
}

ご覧のとおり、私も を使用してい$scope.$applyます。ほとんどの場合、私は何か間違ったことをしています。

JSFIDDLE: https://jsfiddle.net/ashwyn/U3pVM/27621/

4

3 に答える 3

2

「px」テキストを手動で追加する必要はありません。デフォルトで追加するだけ

function PixelCtrl($scope) {
  $scope.pixel = "120";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="PixelCtrl">
    <div ng-show="pixel">
      {{pixel}} px
    </div>
    <input type="text" ng-model="pixel" />
  </div>
</div>

于 2016-10-06T13:59:33.890 に答える
0

@Alexandru Mihaiが言ったように、Angularバージョンをアップグレードしてください。

jsfiddleの例を参照してください。

angular.module("testApp", [])
  .controller("PixelCtrl", function($scope) {
    $scope.pixel = "120";

    $scope.updatePX = function(e) {
      if ($scope.pixel && $scope.pixel.indexOf("px") === -1)
        $scope.pixel += "px";
    }
  })
  .directive("myPixel", function() {
    return {
      require: "ngModel",
      link: function(scope, element, attr, ngModel) {
        element.on("focus", function() {
          var val = ngModel.$viewValue;
          if (val && val.indexOf("px") === -1) {
            ngModel.$setViewValue(ngModel.$viewValue + "px");
            element.val(ngModel.$viewValue);
          }
        })
      }
    }
  })
  .directive("myPixelBetter", function() {
    return {
      scope: {
        value: "=myPixelBetter"
      },
      link: function(scope, element) {
        element.on("focus", function() {
          if (scope.value && scope.value.indexOf("px") === -1) {
            scope.value += "px";
            scope.$apply();
          }
        })
      }
    }
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="testApp">
  <div ng-controller="PixelCtrl">
    <div>
      {{pixel}}
    </div>
    <div>

      With ng-focus
      <input type="text" ng-focus="updatePX()" ng-model="pixel" />
    </div>
    <div>
      With custom directive
      <input type="text" my-pixel ng-model="pixel" />
    </div>
    <div>
      With custom directive. Better solution
      <input type="text" my-pixel-better="pixel" ng-model="pixel" />
    </div>
  </div>
</div>

于 2016-10-06T15:20:59.930 に答える
0

1.2.1 角度バージョンを含める必要があります。これがあなたの解決策です： jsfiddle

<div ng-app>
  <div ng-controller="PixelCtrl">
   <div>
      {{pixel}}
   </div>
   <input type="text" ng-focus="updatePX($event)" ng-model="pixel" />
  </div>
</div>



function PixelCtrl($scope) {
   $scope.pixel = "120";
   $scope.updatePX = function(e){
     e.target.value = e.target.value + "px";
     $scope.pixel=e.target.value;
   }
}
于 2016-10-06T14:21:06.410 に答える