AngularJS: заполнение списка флажков двумя массивами JSON и первоначальная проверка некоторых элементов из одного массива

0

В моем приложении 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>

В моем файле javascript сначала я получаю список из функции backend, этот список содержит все интересы. Если этот успех для бэкэнд-звонка, то я вызываю другую функцию, чтобы получить уже выбранные элементы от этого пользователя, это возвращает другой список, который содержит интересы, которые уже выбраны пользователем. Теперь у меня есть два списка (список всех интересов и список уже выбранных интересов пользователем). Теперь я хочу отобразить список флажков со всеми интересами, но я хочу проверить элементы, которые уже выбраны клиентом.

Это мой javascript выглядит как

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

app.controller('userinterestsCtrl', function($scope, $http) {
// Get full interests list
$http({
    method : 'POST',
    url : './test/userInterests',
    headers : {
        'Content-Type' : 'application/json'
    }
}).success(function(response) {
    console.log('response=>' + response);
    $scope.interests_array = [];
    $scope.userinterests = response;
    console.log($scope.userinterests);

    // Get already selected interests
    $http({
        method : 'POST',
        url : './test/savedInterests',
        headers : {
            'Content-Type' : 'application/json'
        },
        params : {
            user_email : localStorage.getItem("user_email")
        }
    }).success(function(response) {
        console.log('response=>' + response);
        $scope.savedinterests = response;
        console.log(response);
    }).error(function(response, status, headers, config) {
        console.log('failure');
    });

}).error(function(response, status, headers, config) {
    console.log("failure");
});

$scope.submit = function() {
    console.log('Submiting...');
    console.log($scope.interests_array.join(", "));

    var user_email = localStorage.getItem("user_email");
    var preferences = "[" + $scope.interests_array.join(", ") + "]";

    console.log('preferences=>' + preferences);

    $http({
        method : 'POST',
        url : './test/setUserInterests',
        headers : {
            'Content-Type' : 'application/json'
        },
        params : {
            user_email : user_email,
            preferences : preferences
        }
    }).success(function(response) {
        console.log('response=>' + response);

    }).error(function(response, status, headers, config) {
        console.log('failure');
    });
};

}).directive(
    "checkboxGroup",
    function() {
        return {
            restrict : "A",
            link : function(scope, elem, attrs) {
                // Determine initial checked boxes
                if (scope.interests_array.indexOf(scope.userinterest.interestKey) !== -1) {
                    elem[0].checked = true;
                }                   

                // Update array on click
                elem.bind('click', function() {
                    var index = scope.interests_array.indexOf(scope.userinterest.interestKey);
                    // Add if checked
                    if (elem[0].checked) {
                        if (index === -1)
                            scope.interests_array.push(scope.userinterest.interestKey);
                    }
                    // Remove if unchecked
                    else {
                        if (index !== -1)
                            scope.interests_array.splice(index, 1);
                    }
                    // Sort and update DOM display
                    // scope.$apply(scope.array.sort(function(a, b) {
                    // return a - b
                    // }));
                });
            }
        }
    });

Пример данных

        $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
      }];

Я был бы очень признателен, если бы кто-нибудь мог быть настолько добрым, чтобы помочь мне достичь этого.

Спасибо

  • 0
    просто проверяйте при подготовке userinterest.interestKey, если в saveInterests содержится значение, которое доступно в userInterests, и пометьте его как проверенный
  • 0
    переберите userInterests и проверьте каждый элемент, используя метод .contains. если это правда, что нажмите некоторый флаг в этом элементе.
Показать ещё 5 комментариев
Теги:

4 ответа

1
Лучший ответ

Вы могли бы просто создать дополнительное свойство selected в массиве userInterests во время выполнения, например.

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>

Надеюсь, поможет.

Поделиться
  • 0
    Используя этот метод в вашем контроллере, он автоматически создаст дополнительное свойство в массиве userInterests только в приложении для вашего просмотра.
  • 0
    это просто добавит логическое значение к выбранному объекту. Это не странно.
Показать ещё 8 комментариев
0

Проверь это. его простой и легкий

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

app.controller('userinterestsCtrl', function($scope, $http) {

  $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
  }];
  for (var i = 0; i < $scope.userinterests.length; i++) {
    if (JSON.stringify(selectedInterests).indexOf(JSON.stringify($scope.userinterests[i])) > 0) {
      $scope.userinterests[i]['active'] = true;
    } 
  }
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<div ng-app="userinterests">
  <form ng-submit="submit()" ng-controller="userinterestsCtrl">

    <div ng-repeat="userinterest in userinterests">
      <input type="checkbox" ng-model='userinterest.active'/>
      <label>{{userinterest.key}}</label>
    </div>
    <input type="submit" id="submit" value="Submit" />
    <pre>{{selectedInterests | json}}</pre>
  </form>
</div>
Поделиться
0

Используйте фильтр $ filter для поиска, а затем добавьте ключ в свой массив user_interest и на основе этого ключа установите/снимите флажок.

$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;
  }
});
Поделиться
-1

Я хотел бы использовать только один объект модели представления для этого, у которого было дополнительное свойство "selected", и привязать флажок к этому свойству с помощью ng-модели.

Таким образом, в основном вы бы создали новый объект, который выглядел бы как ответ на userinterests, но имел "выбранное" логическое свойство для каждого интереса. Вы можете использовать Array.map для создания этого нового массива.

Затем вы можете использовать ngRepeat для итерации по новому массиву, создавая флажок для каждой записи, привязанный к свойству "selected".

Когда вы пишете на сервер, вы можете использовать Array.filter для создания нового массива, содержащего только выбранные записи, например ответ от сохраненных запросов, которые вы упомянули.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню