Question

我的网站上有一个页面，我想在其中显示一个复选框。我只想在模型最初为假时显示复选框。所以我写了这个（这是我的初始代码，但它是我自己的简化版本。我在此问题的最后更新了代码片段中的代码以显示问题）：< / p>

<div ng-if="!the_field">
    <input ng-model="the_field" type="checkbox">
</div>

问题是如果我点击复选框，它就会消失。那当然有道理，但我不知道如何解决这个问题。

所以我基本上想要的是在呈现HTML时模型为false时显示复选框。但之后我想以某种方式打破数据绑定，以便即使模型更改为true，复选框仍保留在页面上。

有人知道我怎么能做到这一点吗？欢迎所有提示！

[编辑] 我宁愿在模板中做这个，所以我没有得到这些字段的双重列表（因为我有大约50个）。有什么想法吗？

[编辑2] 事实证明它确实适用于上面的例子，这是我自己的代码的简化版本。然而，在我自己的代码中，我不是使用简单的字段，而是使用字典中的项目。我更新了上面的代码并在下面制作了一个代码段来显示问题：

var MainController = function($scope){
    $scope.the_field = {};
    $scope.the_field.item = false;
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="MainController">
  parent: {{the_field.item}}
  <div ng-if="!the_field.item">
    child: {{the_field.item}}<br>
    <input ng-model="the_field.item" type="checkbox">
  </div>
</div>

Answer 1

您可以克隆源对象。像这样：

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.the_field = false;
  $scope.the_field_clone = angular.copy($scope.the_field);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  {{the_field}}
  <div ng-if="!the_field_clone">
    <input ng-model="$parent.the_field" type="checkbox">
  </div>
</div>

http://jsbin.com/ditoka/edit?html,js

更新 - 选项2 - 指令

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.the_field = false;
}).
directive('customIf', function() {
  return {
    scope: {
      customIf: '='
    },
    link: function(scope, element, attrs) {
      if (!scope.customIf) {
        element.remove();  
      }
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  {{the_field}}
  <div custom-if="!the_field">
    <input ng-model="the_field" type="checkbox">
  </div>
</div>

Answer 2

它适用于你的问题的代码，试一试;）

（见What are Scopes?）

var MainController = function($scope){
    $scope.the_field = false;
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="MainController">
  parent: {{the_field}}
  <div ng-if="!the_field">
    child: {{the_field}}<br>
    <input ng-model="the_field" type="checkbox">
  </div>
</div>

Answer 3

您更新的问题的答案：您可以在模型中使用其他属性，在第一次单击时进行编辑...

var MainController = function($scope){
    $scope.model = {init: true, the_field: false};
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="MainController">
    parent: {{model.the_field}}
    <div ng-if="!model.the_field || !model.init">
        <input ng-model="model.the_field" type="checkbox" ng-click="model.init=false;">
    </div>
</div>

如何在Angular中首次渲染后中断数据绑定？

3 个答案: