Question

我有一个文本类型的输入，我需要根据模型属性的值在span上进行此输入。所以，我用来成为span中输入的jquery函数是：

$('.read').replaceWith(function(){
   return '<span class='+this.className+'>'+this.value+'</span>'    
});

我使用的ng指令是： ng-change ：

<input id="1" type="text" ng-model="src.ViewModel.Model.DataA" ng-change="src.search(src.ViewModel.Model.DataA)"/>

方法是：

theController.prototype.search = function(data){  
    if (data == 1)
    {
        theModel.DataA = data;
        $('.read').replaceWith(function(){
            return '<span class='+this.className+'>'+this.value+'</span>';
        });    
    }
};

必须改变的输入是：

<input type="text" ng-model="src.ViewModel.Model.DataB" ng-class="{'read': src.ViewModel.Model.DataA == 1}" />

但它不起作用，所以，我怎么能解决这个问题？

这是我的小提琴：Fiddle

任何帮助或建议，请...

Answer 1

我不知道你为什么要做你正在做的事情，我怀疑你有更好的方法来实现你的目标。

话虽如此，问题在于，在搜索功能中，您正在寻找具有类.read的元素，但该元素不存在。 ng-class将在此摘要周期运行后设置.read类，这意味着在搜索功能运行之后。

您可以使用$ timeout来解决此问题：

$timeout(function(){
    $('.read').replaceWith(function(){
            return '<span class='+this.className+'>'+this.value+'</span>';
        });    
    }
});

这将使得代码在添加.read类之后的下一个$摘要周期中运行。

此外，使用1以外的其他内容初始化DataA属性。否则，您必须先将文本框设置为其他内容，然后再设置为1，以便ng-change触发。

Answer 2

@freddy我把手表放在你想要改变的元素上。像这样的东西

$scope.$watch(function () {
        //here watchme is the input you wish to change into span
        return $("#watchme").hasClass('read');
    }, function () {
        $('.read').replaceWith(function () {
            return '<span>' + $scope.ViewModel.DataA + '</span>'
        });
    });

在这里小提琴：http://jsfiddle.net/3n8o3ud7/5/ 希望这能解决你的目的。

Changin输入类角度模型属性的变化

2 个答案: