-1

私はAngular JSが初めてです。テキストボックスとチェックボックスを持つ1つのディレクティブを持つメインフォームがあります。ユーザーがテキスト ボックスにテキストを追加したり、チェックボックスの初期状態を変更したりした場合、ユーザーが [OK] ボタンをクリックすると、ダーティ フラグをチェックし、保存されていない変更についてユーザーにプロンプ​​トを表示する必要があります。これは私のプランクです。
angular 1.3.16 バージョンを使用する必要があります。 script.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 に答える