Question

我有一个AngularJS SPA包含模态的文本输入，在页面加载时，模态输入通过调用的作用域函数设置为所需的初始状态。

模态

<input class="form-control" ng-model="PatientName" name="PatientName" id="PatientName" />
<button type="button" class="btn btn-default" ng-click="setvals()" data-dismiss="modal">Close</button>

App.js

var app = angular.module("TrollyPatientApp", ['TrollyPatientFilters']);

app.controller("NewPartientModalController", function ($scope, $filter) {
    console.log("controller Loaded...")
    $scope.setvals = function () {
        console.log($scope);
        console.log("Setting Intial New Patient Values.")
        $scope.PatientName = "john";
        $scope.setDateAsNowCB = true; //True = Readonly, false = enabled.
        $scope.ArrivalDateInEd = $filter('date')(new Date(), 'dd/MM/yyyy');//Injecting the date (through the filter) into the ArrivalDateInED field.
        console.log($scope);
    }

    $scope.setvals();
});

当在模态上单击close按钮时，我希望它将所有值重置为默认值。

目前通过致电setvals()来实现这一目标。我可以看到它是从调试控制台调用的，但它似乎不会影响输入值....

Answer 1

在加载时，您应该创建一个对象patient，该对象将包含有关患者的所有信息，并将其存储在init上的某个变量中。＆安培;在重置时将该副本重新绑定到实际的patient模型。

<强>控制器

app.controller("NewPartientModalController", function ($scope, $filter) {
    console.log("controller Loaded...")
    $scope.patient = {};
    $scope.setvals = function () {
        console.log($scope);
        console.log("Setting Intial New Patient Values.")
        $scope.patient.PatientName = "john";
        $scope.patient.setDateAsNowCB = true; //True = Readonly, false = enabled.
        $scope.patient.ArrivalDateInEd = $filter('date')(new Date(), 'dd/MM/yyyy');//Injecting the date (through the filter) into the ArrivalDateInED field.
        //save copy of initial object in some variable
        $scope.copyOfInitialPatient = angular.copy($scope.patient);
    }

    $scope.reset = function(){
        //assign initial copy again to patient object.
        $scope.patient = angular.copy($scope.copyOfInitialPatient);
    }

    $scope.setvals();
});

Answer 2

首先需要在$scope.PatientName = "john";之外定义$scope.setvals，然后在setvals()中更改值才有效。

var app = angular.module("TrollyPatientApp", []);

app.controller("NewPartientModalController", function ($scope, $filter) {
    console.log("controller Loaded...")
    $scope.PatientName = "john";
    $scope.setvals = function () {
        console.log($scope);
        console.log("Setting Intial New Patient Values.")
        $scope.PatientName = "john";
        $scope.setDateAsNowCB = true; //True = Readonly, false = enabled.
        $scope.ArrivalDateInEd = $filter('date')(new Date(), 'dd/MM/yyyy');//Injecting the date (through the filter) into the ArrivalDateInED field.
        console.log($scope);
    }

    $scope.setvals();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="TrollyPatientApp" ng-controller="NewPartientModalController">
  <input class="form-control" ng-model="PatientName" name="PatientName" id="PatientName" />
<button type="button" class="btn btn-default" ng-click="setvals()" data-dismiss="modal">Close</button>
</body>

angularJS重置按钮上的$ Scope值单击

2 个答案: