【问题标题】:AngularJS multi select checkboxes saves in comma separated StringAngularJS多选复选框以逗号分隔的字符串保存
【发布时间】:2015-09-07 15:30:30
【问题描述】:

我想从 angularJS 中的选定复选框项目中获取逗号分隔的字符串。同时,当从数据库中检索逗号分隔的字符串时,我希望相应地检查复选框。

<div class="col-md-5">
    <input type="checkbox" ng-model="Drawings.CarMDrawings" ng-change="Update(Drawings)"> Car
    <br />

    <input type="checkbox" ng-model="Drawings.SignalMDrawings" ng-change="Update(Drawings)"> Signal
    <br />

    <input type="checkbox" ng-model="Drawings.DoorMDawings" ng-change="Update(Drawings)"> Door
    <br />

  </div>

我以非常简单的方式解决了这个问题是 Plunker http://plnkr.co/edit/YYd5bN5Chmyjt6gSH1Bw?p=preview

 $scope.Update = function(Drawings) {
    var str = "";
    if (Drawings.CarMDrawings) {
      str = "Car";
    }
    if (Drawings.SignalMDrawings) {
      str = str + ",Signal";
    }
    if (Drawings.DoorMDawings) {
      str = str + ",Door";
    }
    if (str.charAt(0) === ',') {
      str = str.substr(1);
    }
    $scope.data = str;
  }

  $scope.revUpdate = function(data) {
    var str = data;
    $scope.Drawings = {};
    if (str.indexOf('Car') != -1) {

      $scope.Drawings.CarMDrawings = true;
    }
    if (str.indexOf('Signal') != -1) {

      $scope.Drawings.SignalMDrawings = true;
    }
    if (str.indexOf('Door') != -1) {

      $scope.Drawings.DoorMDawings = true;
    }

}

但是当我有很多类似的项目时它没有帮助。任何人都可以帮助我构建指令或扩展,以便我可以经常重用它们。 附言我不想要对象数组,而是简单的逗号分隔的字符串项。

【问题讨论】:

    标签: javascript angularjs multi-select


    【解决方案1】:

    如果你使用 'indexOf',你会得到很多垃圾项,其中包括你想要查找的文本。

    所以我认为这是获得更精确值的最接近的方法。

    if (new RegExp("\\b"+"Car"+"\\b").test(str)) {
        $scope.Drawings.CarMDrawings = true;
    }
    
    var str="test ,Car ,test";  //true
    var str="test, Car, test";  //true
    var str="test Cartest";     //false
    var str="testCar test";     //false
    

    也许这是很晚的答案,但我希望这符合您的意图,

    并且对其他会看这个的人很有帮助。 :)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-08-02
      • 1970-01-01
      • 1970-01-01
      • 2018-03-16
      • 2013-11-02
      • 2014-08-08
      相关资源
      最近更新 更多