ng-model未正确更新

时间:2016-12-01 07:09:32

标签: angularjs

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat='x in trail'>
<input type=checkbox ng-model='one1'>{{x}}</div>
<div  ng-repeat='x in array'>
<p ng-hide='one1' >{{x}}</p>
</div>
</div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.trail = ["Volvo","bike","access","rocket"];
$scope.array = ["Volvo","bike","access","rocket"];
});
</script>
</body>
</html>

当我运行它并单击任何复选框时,整个数组值应该隐藏,但不能隐藏。

3 个答案:

答案 0 :(得分:0)

向$ scope.trail数组添加一个变量,例如&#34;已选中&#34;

<input type=checkbox ng-model="x.checked">

您可以看到demo here

答案 1 :(得分:0)

如果你真的想要隐藏整个数组,你可以利用ng-change指令传递模型

here is a demo

答案 2 :(得分:0)

实际上我发现你的例子有问题。如果创建ng-repeat并使用具有相同范围值的输入区域,则数组值不等于范围值。

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.trail = ["Volvo","bike","access","rocket"];
        $scope.array = ["Volvo","bike","access","rocket"];
    $scope.one = true;
}

<div ng-app="myApp" ng-controller="MyCtrl">
<input type="checkbox" ng-model="one">{{one}} {{x}}
  <div ng-repeat='x in trail'>

  </div>
  <div  ng-repeat='x in array'>
    <label ng-show="one == true" >{{x}}</label>
  </div>
</div>

Working Example