Fatal编程技术网
  • javascript/
  • Javascript AngularJS：使用两个JSON数组填充复选框列表，并最初检查一个数组中的一些项

Javascript AngularJS：使用两个JSON数组填充复选框列表，并最初检查一个数组中的一些项

javascript jquery angularjs

Javascript AngularJS：使用两个JSON数组填充复选框列表，并最初检查一个数组中的一些项,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,在我的AngularJS应用程序中，有一个复选框列表。此列表表示用户的某些兴趣。用户可以从列表中选择一个或多个项目。 HTML <html> <head> <title>User Interests</title> <script src="../scripts/angular.min.js"></script> <script src="../scripts/userinte

在我的AngularJS应用程序中，有一个复选框列表。此列表表示用户的某些兴趣。用户可以从列表中选择一个或多个项目。 HTML

<html>
   <head>
      <title>User Interests</title>
      <script src="../scripts/angular.min.js"></script>
      <script src="../scripts/userinterests.js"></script>
      <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
      <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
   </head>
   <body>
      <div ng-app="userinterests">
         <form ng-submit="submit()" ng-controller="userinterestsCtrl">
            <div ng-repeat="userinterest in userinterests">
               <input type="checkbox" checkbox-group /> <label>{{userinterest.interestKey}}</label>
            </div>
            <input type="submit" id="submit" value="Submit" />
         </form>
      </div>
   </body>
</html>
样本数据

        $scope.userinterests = [{
        "key": "test1",
        "score": 1.0
      }, {
        "key": "test2",
        "score": 1.0
      }, {
        "key": "test3",
        "score": 1.0
      }, {
        "key": "test4",
        "score": 1.0
      }, {
        "key": "test5",
        "score": 1.0
      }, {
        "key": "test6",
        "score": 1.0
      }, {
        "key": "test7",
        "score": 1.0
      }, {
        "key": "test8",
        "score": 1.0
      }, {
        "key": "test9",
        "score": 1.0
      }, {
        "key": "test10",
        "score": 1.0
      }, {
        "key": "test11",
        "score": 1.0
      }];

      var selectedInterests = [{
        "key": "test1",
        "score": 1.0
      }, {
        "key": "test2",
        "score": 1.0
      }, {
        "key": "test3",
        "score": 1.0
      }];
如果有人能帮助我实现这一目标，我将不胜感激

谢谢你

我只会使用一个视图模型对象，它有一个额外的“selected”属性，并使用ng model将复选框绑定到此属性

因此，基本上，您将创建一个新对象，它看起来像对UserInterest的响应，但每个兴趣都有一个“selected”布尔属性。可以使用Array.map创建此新数组

然后，您可以使用ngRepeat在新数组上迭代，为每个条目创建一个复选框，该复选框绑定到“selected”属性

在向服务器写入时，可以使用Array.filter生成仅包含选定项的新数组，如您提到的savedinterests的响应

您可以在运行时的
userInterests
数组中创建一个额外的
selected
属性

userInterests.forEach(function(item){
   savedInterests.forEach(function(savedItem){
      if(savedItem.interestKey === item.interestKey){
         item.selected = true;
      }
   })
})
然后在模板中使用

<div ng-app="userinterests">
         <form ng-submit="submit()" ng-controller="userinterestsCtrl">
            <div ng-repeat="userinterest in userinterests">
               <input type="checkbox" checkbox-group ng-model="userinterest.selected" /> <label{{userinterest.interestKey}}</label>
            </div>
            <input type="submit" id="submit" value="Submit" />
         </form>
      </div>



使用$filter进行搜索，然后在用户兴趣数组中添加一个键，并根据该键选中/取消选中复选框


$scope.userinterests = [{
"key": "test1",
"score": 1.0
}, {
"key": "test2",
"score": 1.0
}, {
"key": "test3",
"score": 1.0
}, {
"key": "test4",
"score": 1.0
}, {
"key": "test5",
"score": 1.0
}, {
"key": "test6",
"score": 1.0
}, {
"key": "test7",
"score": 1.0
}, {
"key": "test8",
"score": 1.0
}, {
"key": "test9",
"score": 1.0
}, {
"key": "test10",
"score": 1.0
}, {
"key": "test11",
"score": 1.0
}];

var selectedInterests = [{
"key": "test1",
"score": 1.0
}, {
"key": "test2",
"score": 1.0
}, {
"key": "test3",
"score": 1.0
}];
user_interests.map(function(c,i){
  var found = $filter('filter')(saved_interests, {key: c.key}, true);
  if (found.length) {
      c.active = 1;
      user_interests[i] = c;
  }
});



看看这个。这很简单



var-app=angular.module（'userinterests'，[]）；
app.controller（'userinterestsCtrl'，函数（$scope，$http）{
$scope.userinterests=[{
“密钥”：“test1”，
“分数”：1.0
}, {
“密钥”：“test2”，
“分数”：1.0
}, {
“密钥”：“test3”，
“分数”：1.0
}, {
“密钥”：“test4”，
“分数”：1.0
}, {
“密钥”：“test5”，
“分数”：1.0
}, {
“密钥”：“test6”，
“分数”：1.0
}, {
“密钥”：“test7”，
“分数”：1.0
}, {
“密钥”：“test8”，
“分数”：1.0
}, {
“密钥”：“test9”，
“分数”：1.0
}, {
“密钥”：“test10”，
“分数”：1.0
}, {
“密钥”：“test11”，
“分数”：1.0
}];
var selectedInterests=[{
“密钥”：“test1”，
“分数”：1.0
}, {
“密钥”：“test2”，
“分数”：1.0
}, {
“密钥”：“test3”，
“分数”：1.0
}];
对于（变量i=0；i<$scope.userinterests.length；i++）{
if（JSON.stringify（selectedInterests）.indexOf（JSON.stringify（$scope.userinterests[i]））>0）{
$scope.userinterests[i]['active']=true；
} 
}
});


{{userinterest.key}
{{selectedInterests | json}}

在准备userinterest.interestKey时只需检查，如果savedInterests包含userInterests中可用的值，则通过userInterests将其标记为checkedloop，并使用.contains方法检查每个元素。如果为true，则在该元素中推送某个标志。创建fiddle片段。我将在我的工作，谢谢你的评论。我已经标记了这个问题，请版主注意。您意识到帖子的内容在右侧仍然可见吗？通过在控制器中使用此方法，它将自动在应用程序中为您的视图在
userInterests
数组中创建一个额外的属性。它只会向所选对象添加一个布尔值。不，你做错了。它只会将选定的属性添加到对象阵列等待我为您创建一个小提琴。：）如果只是
userinterest
和
selectedinterest
的数组，那么我们可以编辑答案并删除数组中的项目名称。这样行吗？

$scope.userinterests = [{
"key": "test1",
"score": 1.0
}, {
"key": "test2",
"score": 1.0
}, {
"key": "test3",
"score": 1.0
}, {
"key": "test4",
"score": 1.0
}, {
"key": "test5",
"score": 1.0
}, {
"key": "test6",
"score": 1.0
}, {
"key": "test7",
"score": 1.0
}, {
"key": "test8",
"score": 1.0
}, {
"key": "test9",
"score": 1.0
}, {
"key": "test10",
"score": 1.0
}, {
"key": "test11",
"score": 1.0
}];

var selectedInterests = [{
"key": "test1",
"score": 1.0
}, {
"key": "test2",
"score": 1.0
}, {
"key": "test3",
"score": 1.0
}];
user_interests.map(function(c,i){
  var found = $filter('filter')(saved_interests, {key: c.key}, true);
  if (found.length) {
      c.active = 1;
      user_interests[i] = c;
  }
});