Question

在下面的示例中，输入＆＃39; ia＆＃39;中的值可能与模型值不同步（例如，如果您键入＆＃39; aaa＆＃39;）。我想要实现的是输入＆＃39; ia＆＃39;失去焦点，将其值更新为当前模型值的格式化值（例如，当模型值为null时，将视图值更新为字符串＆＃39; N / A＆＃39;）。谁知道我可能会实现这个目标？感谢。

目前的行为是，如果您输入＆＃39; aaa＆＃39;作为专业，模型值更新为null bot＆＃39; aaa＆＃39;留在输入中。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myapp">

<head>

  <script>
    var myapp = angular.module('myapp', []);
    myapp.controller('mycontroller', function($scope) {
      $scope.model = {
        name: "ttt",
        age: 24,
        profession: null
      };
    });

    var professionList = [{
      id: 1,
      name: "p1"
    }, {
      id: 2,
      name: "p2"
    }, {
      id: 3,
      name: "p3"
    }, {
      id: 4,
      name: "p4"
    }];

    myapp.directive("prof", function() {
      return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {

          ngModel.$formatters.push(function(value) {
            for (var i = 0; i < professionList.length; i++) {
              if (value == professionList[i].id)
                return professionList[i].name;
            }
            return "N/A";
          });

          //format text from the user (view to model)
          ngModel.$parsers.push(function(value) {
            for (var i = 0; i < professionList.length; i++) {
              if (value == professionList[i].name)
                return professionList[i].id;
            }
            return null;
          });

          element[0].ngModel = ngModel;
        }
      };
    });
  </script>
</head>

<body ng-controller="mycontroller">
  <form>
    Name:
    <input ng-model="model.name" />
    <br />Age:
    <input ng-model="model.age" />
    <br />Profession:
    <input prof="" ng-model="model.profession" id="ia" />
    <input ng-model="model.profession" />
  </form>

  <hr />Name: {{model.name}}
  <br />Age: {{model.age}}
  <br />Profession: {{model.profession}}



</body>

</html>

＆＃13;

更新：我找到了一个基于this question

中答案的解决方案

//add this to the link function:
ngModel.$render = function(){
    element[0].value = ngModel.$viewValue;
};

element[0].onblur = function(){
    var viewValue = ngModel.$modelValue;
    for (var i in ngModel.$formatters) {
        viewValue = ngModel.$formatters[i](viewValue);
    }
    ngModel.$viewValue = viewValue;
    ngModel.$render();
};

Answer 1

返回null时，你没有重新初始化ngModel，我不认为这里需要指令，在angularjs中有一些叫做ng-blur的东西，

Profession : <input ng-model="model.profession" ng-blur="checkProfession() "/>
Profession ID : <input ng-model="model.id" />

在你的控制器中写一个函数，

   $scope.checkProfession=function(){
     var flag=0;
     for (var i = 0; i < professionList.length; i++) {
        if ($scope.model.profession == professionList[i].name){
          $scope.model.id=professionList[i].id;
          flag=1;
        }
        if(!flag){
          $scope.model.id="";
          $scope.model.profession="";
        }
    }
  }

AngularJS：即使$ modelValue未更改，如何刷新$ viewValue

1 个答案: