2016-04-06 9 views
2

Ich verwende ng-model in einem input Tag, wieWie ng-Modell dynamisch

<input ng-model="someModel" type="file" />

An einem gewissen Punkt in der Ausführung Ich habe Interesse an Deaktivieren/Entfernen des deaktivieren ng-model, so dass die input nicht mehr von Änderungen an someModel beeinflusst wird.

Ich habe versucht, das Eingabeelement auszuwählen und dann element.removeAttr("ng-model") anwenden, aber das Element scheint immer noch auf Änderungen an someModel zu reagieren.

Meine Vermutung ist, dass dies aufgrund des Digest-Zyklus geschieht. Wie deaktiviere/entferne ich das ng-Modell?

+0

können Sie eine benutzerdefinierte Validator verwenden, die Sie falsch zu erzwingen, dann werden Sie Ihre Eingabe ungültig führen und wird nicht Ihr Modell aktualisieren – fantarama

+0

Hier ist eine andere Lösung (die mir ein bisschen verworren scheint) : http://stackoverflow.com/questions/18240168/genuinely-stop-a-element-from-binding-unbind-an-element-angularjs – ippi

Antwort

2

Haben Sie zwei Eingänge mit ng-if-Bedingung. ng-if kann ein Element aus DOM entfernen.

<input ng-model="someModel" type="file" ng-if="condition1" /> 
<input ng-model="" type="file" ng-if="!condition1" /> 
+0

Vielen Dank. Dies kann als Workaround dienen, um das zu erreichen, was ich brauche. Aber es beantwortet tatsächlich nicht die Frage, wie man das ng-Modell wirklich entfernen/deaktivieren kann. Ich möchte nicht 2 Eingänge haben, und einen von ihnen bedingt entfernen, sondern nur 1 Eingang, dessen ng-Modell entfernt wird. In meinem Fall wird die Eingabe innerhalb einer Direktive generiert, was die Dinge kompliziert macht ... – bjd54321

1

Hier ist ein Beispiel für eine Möglichkeit, dies zu tun, ist mit einem Controller. Es bindet im Grunde die Eingabe an eine Dummy-Variable und ruft eine ng-change-Funktion auf. In der Steuerung können Sie Ihre Logik festlegen, ob die Eingabe ein someModel aktualisieren soll oder nicht. Im Beispiel bestimmt ein Kontrollkästchen, ob aktualisiert werden soll oder nicht.

var app = angular.module('app', []); 
 
app.controller('controller', ['$scope', 
 
    function($scope) { 
 
    $scope.update = true; 
 
    $scope.dummyChanged = function(dummy) { 
 
     if ($scope.update) { 
 
     $scope.someModel = dummy; 
 
     } 
 
    } 
 

 
    } 
 
])
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="controller"> 
 
    Type value in here 
 
    <input ng-model="dummy" ng-change="dummyChanged(dummy)" /> 
 
    <br />Click here to allow updates to model 
 
    <input ng-model="update" type="checkbox" /> 
 

 
    <pre> 
 
     someModel: {{someModel}} 
 
     update: {{update}} 
 
     </pre> 
 
    </div> 
 
</body> 
 

 
</html>