角度x可编辑取消选择以清除不起作用的文本输入

Question

UPDATE：将post更改为更简化的示例。

http://jsfiddle.net/bphein1980/avfozhx4/1/

问题：当x可编辑的选择更改为"option3"，并且$scope.changeCondition1（）中的$scope.Condition1值设置为零（0）时…为什么视图没有反映新的Condition1的值？

代码：

<div ng-app="myApp">
    <div ng-controller="testController">
        <form editable-form name="myForm">
            <button class="show" type="button" ng-show="!myForm.$visible" ng-click="myForm.$show()">Edit</button>
            <button class="done" type="submit" ng-show="myForm.$visible">Done</button>
        </form>
        <span 
            editable-select="condition1" 
            e-ng-options="c1.name as c1.name for c1 in condition1s" 
            e-ng-change="changeCondition1($data)"
            e-form="myForm"
            e-name="condition1"
        >
            {{ showCondition1() }}
        </span>
        <span editable-text="condition1value" e-ng-model="condition1value" e-name="condition1value" e-form="myForm"> 
            {{ condition1value }}
        </span>
    </div>
</div>

更多代码：

var myApp = angular.module("myApp", ["xeditable"]);
myApp.run(function(editableOptions, editableThemes) {
    editableOptions.theme = 'default'; 
});
myApp.controller("testController", ["$scope", "$filter", testController]);
function testController($scope, $filter) {
    $scope.condition1s = [
        { id: 1, name: "option1" },
        { id: 2, name: "option2" },
        { id: 3, name: "option3" }
    ];
    $scope.condition1 = "";
    $scope.condition1value = "20";
    $scope.changeCondition1 = function(newVal){
        if(newVal == 'option3'){
             $scope.condition1value = 0;   
        }
        console.log("changeCondition1", newVal, $scope);
    };
    $scope.showCondition1 = function(){
        var selected = $filter('filter')($scope.condition1s, { name: $scope.currentCondition1 });
        return ($scope.currentCondition1 && selected.length) ? selected[0].name : 'empty';        
    };
}

Answer 1

我能够找到一个解决方案。Xeditable在编辑时创建自己的作用域，然后在完成后将其复制回。您可以直接编辑表单的范围。

以下是一个工作示例：https://jsfiddle.net/bphein1980/0au7h389/

在fiddle视图中，编辑一行并将所选内容更改为"空"。其右侧文本字段中的值将被删除。

$scope.changeCondition2 = function(data, line){
    line.condition2 = data;
    if(data === ''){
        var editables = this.$form.$editables;
        for(var i=0; i<=editables.length-1; i++){
           if(editables[i].name == 'condition2value'){
               editables[i].scope.$data = ""; 
               break;
           }
        }
    }
}; 

这是帮助我找到解决方案的帖子：https://github.com/vitalets/angular-xeditable/issues/60

Answer 2

不确定你在问什么，但你是否尝试过在控制器中调用$watch来查看你正在侦听的模型何时为null或为空，然后它会按照你需要的方式设置所有正确的字段？

你能用另一种方式说这个问题吗？因为它对我来说真的没有意义。