Javascript angularjs仅在事件上绑定数据

我有一个表单，我只想在用户单击按钮时绑定它的值。
当用户选择重置/取消时，我希望返回原始模型数据。 怎样才能做到呢？ 谢谢

函数MyCont（$scope）{
$scope.value=15；
$scope.tmpValue=$scope.value；
};
{{tmpValue}}


提交
重置

您需要模型来跟踪新旧价值

<div ng-controller="MyCont" ng-app>
    <form>
        <input type="number" min="0" max="50" value="{{value.newVal}}" ng-model="value.newVal" />{{value.newVal}}
        <br />
        <br />
        <input type="submit" value="bind the data" ng-click="bindVal()" />
        <input type="reset" ng-click="resetVal()"value="reset back to 15" />
    </form>
</div>

function MyCont($scope) {
    $scope.value = {
        oldVal:15,
        newVal:15
    }
    $scope.bindVal=function(){
    $scope.value.oldVal=$scope.value.newVal;

    }
    $scope.resetVal=function(){
    $scope.value.newVal=$scope.value.oldVal;
    }
};

{{value.newVal}}




功能MyCont（$scope）{
$scope.value={
奥尔德瓦尔：15，
纽瓦尔：15
}
$scope.bindVal=函数（）{
$scope.value.oldVal=$scope.value.newVal；
}
$scope.resetVal=函数（）{
$scope.value.newVal=$scope.value.oldVal；
}
};

---

：-

源于Squiroid，但修复了重置

function MyCont($scope) {
$scope.value = {
    origVal:15,
    oldVal:15,
    newVal:15
}
$scope.bindVal=function(){
$scope.value.oldVal=$scope.value.newVal;

}
$scope.resetVal=function(){
$scope.value.oldVal=$scope.value.origVal;
}

---

如果我正确地满足了您的需求（您希望通过单击BTN来添加/删除输入值和显示值之间的连接），您可以这样实现：

<div ng-controller="MyCont" ng-app>
<form>  
    <input type="number" min="0" max="50" value="{{value}}" data-ng-model="value"/> 
    {{displayValue}}
    <br />
    <br />
    <input type="submit" value="bind the data" data-ng-click="bindVal()" />
    <input type="reset" value="reset back to 15" data-ng-click="resetVal()" />
</form>

---

你想在blur上更新它吗？或者仅当单击按钮时？@NarekMamikonyan-单击时重置工作，但当我更改文本时{value.newVal}也会更改，它应该在单击后更改。只需在显示值的位置使用{{value.oldVal}，而不是{{value.newVal}

<div ng-controller="MyCont" ng-app>
    <form>
        <input type="number" min="0" max="50" value="{{value.newVal}}" ng-model="value.newVal" />{{value.newVal}}
        <br />
        <br />
        <input type="submit" value="bind the data" ng-click="bindVal()" />
        <input type="reset" ng-click="resetVal()"value="reset back to 15" />
    </form>
</div>

function MyCont($scope) {
    $scope.value = {
        oldVal:15,
        newVal:15
    }
    $scope.bindVal=function(){
    $scope.value.oldVal=$scope.value.newVal;

    }
    $scope.resetVal=function(){
    $scope.value.newVal=$scope.value.oldVal;
    }
};

function MyCont($scope) {
$scope.value = {
    origVal:15,
    oldVal:15,
    newVal:15
}
$scope.bindVal=function(){
$scope.value.oldVal=$scope.value.newVal;

}
$scope.resetVal=function(){
$scope.value.oldVal=$scope.value.origVal;
}

<div ng-controller="MyCont" ng-app>
<form>  
    <input type="number" min="0" max="50" value="{{value}}" data-ng-model="value"/> 
    {{displayValue}}
    <br />
    <br />
    <input type="submit" value="bind the data" data-ng-click="bindVal()" />
    <input type="reset" value="reset back to 15" data-ng-click="resetVal()" />
</form>

function MyCont($scope) {
var isValueReallyBinded = true,
    initialValue = 15;
$scope.value = initialValue;

$scope.$watch('value', function (newVal, oldVal) {
    if(isValueReallyBinded) {
        $scope.displayValue = $scope.value;
    }
    else {
        $scope.displayValue = initialValue;
    }
});

$scope.bindVal = function () {
    isValueReallyBinded = true;
    $scope.displayValue = $scope.value;
};
$scope.resetVal = function () {
    isValueReallyBinded = false;
    $scope.displayValue = initialValue;
};
};