-1

我是角度 JS 的新手。我有主表单，它有文本框和一个带有复选框的指令。如果用户在文本框中添加了一些文本或修改复选框的初始状态，当用户单击确定按钮时，我必须检查脏标志并提示用户进行未保存的更改。这是我的笨拙。
我必须使用 angular 1.3.16 版本。 脚本.js：

// Code goes here
(function() {
  "Use Strict";


  angular.module('myapp', []);

  angular.module('myapp').
  controller('myappctrl', function($scope) {

    $scope.user = {
      list: [{
        id: 1,
        value: 'chkbox1',
        selectedReturnType: false
      }, {
        id: 2,
        value: 'chkbox2',
        selectedReturnType: true
      }, {
        id: 3,
        value: 'chkbox3',
        selectedReturnType: false
      }, {
        id: 4,
        value: 'chkbox4',
        selectedReturnType: true
      }, ]
    };

    $scope.ok = function() {
      if ($scope.mainform.$dirty) {
        alert('form modified');
      }
    };
  });




  angular.module('myapp').directive('checkboxdir', function() {
    return {
      templateUrl: "checkboxdir.html",
      restrict: 'EA',
      scope: {
        user: '='
      }
    }
  });


}());

索引.html：

<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <link rel="stylesheet" href="style.css" />
     <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="angular.js@1.3.16" data-semver="1.3.16" src="https://code.angularjs.org/1.3.16/angular.js"></script>

    <script src="script.js"></script>
  </head>

  <body  ng-controller="myappctrl">
    <form name="mainform" novalidate>
    <checkboxdir user='user'></checkboxdir>
    <input type="text" />
    <input type="button" value="ok" ng-click="ok()"/>
    </form>
  </body>

</html>

指示：

<div>
  <form name='returntypeform' novalidate>
    <div ng-repeat='item in user.list'>
    <input type='checkbox' ng-checked="item.selectedReturnType" />
    <label>{{item.value}}</label>
    </div>
  </form>
</div>

需要将复选框选中/取消选中从子指令传递给父。知道为什么这不起作用吗？

4

1 回答 1

0

你错过了 ng-model。我已经更新了 plunker： plunker

<body  ng-controller="myappctrl">
    <div ng-form="mainform">
    <checkboxdir user='user'></checkboxdir>
    <input type="text" data-ng-model="model"  name="text"/>
    <input type="button" value="ok" ng-click="ok()"/>
    </div>
  </body>

<div>
  <form name='returntypeform' novalidate>
    <div ng-repeat='item in user.list'>
    <input type='checkbox' 
    name="$index"
    data-ng-model="item.selectedReturnType"
    ng-checked="item.selectedReturnType" />
    <label>{{item.value}}</label>
    </div>
  </form>
</div>
于 2015-11-27T10:52:43.603 回答