AngularJS：即使 $modelValue 不变，如何刷新 $viewValue答案

【问题标题】：AngularJS: How to refresh $viewValue even when $modelValue is unchangedAngularJS：即使 $modelValue 不变，如何刷新 $viewValue
【发布时间】：2015-01-22 14:02:23
【问题描述】：

在下面的示例中，输入“ia”中的值可能与模型值不同步（例如，如果您输入“aaa”）。我想要实现的是当输入'ia'失去焦点时，将其值更新为当前模型值的格式化值（例如，当模型值为空时，将视图值更新为字符串'N/A'）。有人知道我这可能实现吗？谢谢。

当前的行为是，如果您输入 'aaa' 作为职业，模型值会更新为空机器人 'aaa' 留在输入中。

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

更新：我根据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();
};

【问题讨论】：

标签： angularjs

【解决方案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="";
        }
    }
  }

【讨论】：