Html 如何从ng repeat输入控制ng repeat div

所以，刚刚开始学习Angular，它非常棘手，来自一个非常简单的JS和jQuery背景。这就是我要做的。我有一个“标签模板”，它有两个类别，然后包含一些子标签。我将它们定义为一个对象，其思想是可以通过文件请求和操作等来调用对象/文件

我使用一个工厂服务和一个带有ng repeat的控制器动态加载标签和标签类别输入。同样，我已经将子标签存放到第2页的另一个div中（使用jQuery移动页面滑动）。我想使用类别标签的复选框状态来显示/隐藏第2页上的子标签

我已经尝试了几十种方法，搜索了stackexchange、网络等等，但简单、直接、相似，足以让它正常工作。如果有人能给我指出正确的方向，那就太好了。请记住，我的下一步是在第1页添加按钮以添加新类别，在第2页添加按钮以向子标记类别添加子标记

最后，我还有一件奇怪的事情要报告。如果我的DOM中只有两个页面，那么在加载页面时会出现一些奇怪的行为。如果我从第1页加载，标签复选框将不起作用，并且我看到标签的边框有轻微的发胖。如果我向左滑动到第2页并从此页重新加载，标签的边框将变薄，复选框将起作用。无法追踪发生这种情况的原因。我的解决办法是添加一个空的零页，然后立即将页面更改为第一页，但这远远不够理想。如果您对此有任何想法，我们也将不胜感激

这是：

HTML

用于Angular应用程序的JS

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

app.factory('TagTemplate', [function () {

  var TagTemplate = {};

  var tagTemplate = {
    family: {
      name: "family",
      description: "These are your family members.",
      color: "red",
      items: [
        {
          name: "Joe"
        },
        {      
          name: "Mary"
        },
        {
          name: "Jim"
        }
      ]
    },
    design: {
      name: "design",
      description: "Different types of design notes.",
      color: "blue",
      items: [
        {
          name: "inspiring"
        },
        {
          name: "fail"
        },
        {
          name: "wayfinding"
        },
        {
          name: "graphics"
        }
      ]
    },
    work: {
      name: "work",
      description: "Stuff for work.",
      color: "green",
      items: [
        {
          name: "whiteboard"
        },
        {
          name: "meeting"
        },      
        {
          name: "event"
        }
      ]
    }
  };

  TagTemplate = tagTemplate;

  return TagTemplate;
}])



// Controller that passes the app factory

function templateCtrl($scope, TagTemplate) {
  $scope.template = TagTemplate;

  $scope.click = function(model) {
    console.log(this.checked, this.tagCat.name);
  }


}


app.filter('bgColor', function () {
  return function (color) {
    // console.log(color, $.Color(color).lightness(.05).toHexString(.05));
    // var rgba = $.Color(color).alpha(.05);

    return $.Color(color).lightness(.97).toHexString();
  }
})

---

主要是成功

我找到了一个JSFIDLE，它为我的实验打下了良好的基础。玩了一会儿之后，我意识到我只需要在我的数据服务模型中的每个类别中创建一个show属性，然后将ng模型分配给该属性来控制它

我不得不在我自己的代码中做一些不同的事情，但是从以下JSFIDLE中获得的理解让我找到了答案：

HTML

仍然有复选框的问题，但如果我不能找到它，我会为它打开一个单独的问题

谢谢

$(document).ready(function() {
  // addTemplateItems(tagTemplate); // not necessary with Angular
  // $.mobile.changePage('#two', { transition: 'none' });  // required or checkboxes don't work on load
  $.mobile.changePage('#one', { transition: 'none' }); 
//   // $("[data-role=controlgroup]").controlgroup("refresh");

  // set up page nav
  $(document).delegate('.ui-page', "swipeleft", function(){
      var $nextPage = $(this).next('[data-role="page"]');
      var $prevPage = $(this).prev('[data-role="page"]');

      console.log("binding to swipe-left on "+$(this).attr('id') );
      // swipe using id of next page if exists
      if ($nextPage.length > 0) {
          $.mobile.changePage($nextPage, { transition: 'slide' });
      } else {
          var message = 'tagged!';

          // save tags here

          flashNotify(message);
          console.log('fire event!');
          $('#flashNotification').promise().done(function () {
            $('#group1').hide();
            $('#group2').hide();
            $('.ui-btn').hide();
            // addTemplateItems(tagTemplate);
            $.mobile.changePage($prevPage, { transition: 'none' });
            captureImage();
          }); 
      }
  }).delegate('.ui-page', "swiperight", function(){
      var $prevPage = $(this).prev('[data-role="page"]');
      console.log("binding to swipe-right on "+$(this).attr('id') );
      // swipe using id of next page if exists
      if ($prevPage .length > 0) {
          $.mobile.changePage($prevPage, { transition: 'slide', reverse : true });
      } else {
          alert('no backy backy!');
      }
  });

// $("input[type='checkbox']").checkboxradio().checkboxradio("refresh");

});

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

app.factory('TagTemplate', [function () {

  var TagTemplate = {};

  var tagTemplate = {
    family: {
      name: "family",
      description: "These are your family members.",
      color: "red",
      items: [
        {
          name: "Joe"
        },
        {      
          name: "Mary"
        },
        {
          name: "Jim"
        }
      ]
    },
    design: {
      name: "design",
      description: "Different types of design notes.",
      color: "blue",
      items: [
        {
          name: "inspiring"
        },
        {
          name: "fail"
        },
        {
          name: "wayfinding"
        },
        {
          name: "graphics"
        }
      ]
    },
    work: {
      name: "work",
      description: "Stuff for work.",
      color: "green",
      items: [
        {
          name: "whiteboard"
        },
        {
          name: "meeting"
        },      
        {
          name: "event"
        }
      ]
    }
  };

  TagTemplate = tagTemplate;

  return TagTemplate;
}])



// Controller that passes the app factory

function templateCtrl($scope, TagTemplate) {
  $scope.template = TagTemplate;

  $scope.click = function(model) {
    console.log(this.checked, this.tagCat.name);
  }


}


app.filter('bgColor', function () {
  return function (color) {
    // console.log(color, $.Color(color).lightness(.05).toHexString(.05));
    // var rgba = $.Color(color).alpha(.05);

    return $.Color(color).lightness(.97).toHexString();
  }
})

<div ng-app ng-controller="Ctrl">
    <div class="control-group" ng-repeat="field in customFields">
        <label class="control-label">{{field}}</label>
        <div class="controls">
            <input type="text" ng-model="person.customfields[field]" />
            <label><input type="checkbox" ng-model="person.show[field]" /></label>
        </div>
    </div>

    <button ng-click="collectData()">Collect</button><button ng-click="addField()">Add Field</button><br/><br/>

    <em>Booleans</em>
    <div ng-repeat="field in customFields">
        <p>{{field}}: {{person.show[field]}}</p>
    </div>
    <em>Show/Hide</em>
    <div ng-repeat="field in customFields">
        <p ng-show="person.show[field]">{{field}}: {{person.customfields[field]}}</p>
    </div>
</div>

function Ctrl($scope) {
    $scope.customFields = ["Age", "Weight", "Height"];
    $scope.person = {
        customfields: {
             "Age": 0,
             "Weight": 0,
             "Height": 0
        },
         show: {
             "Age": false,
             "Weight": false,
             "Height": false
        }
    };

    $scope.collectData = function () {
        console.log($scope.person.customfields, $scope.person.show);
    }

    $scope.addField = function () {
        var newField = prompt('Name your field');
        $scope.customFields.push(newField);

    }
}