我有复选框列表,我想推选所选/已检查的值。如果我将该值推入复选框列表,则应进行检查。例如,我推三星Galaxy S6。如果我放三星Galaxy S6,我们需要检查随着提供数据,因为三星Galaxy S6有一些报价。所以如果三星Galaxy S6被检查下拉列表应该填写提供消息。这是一个demo。我已经尝试了我的水平,但我无法解决请有人帮助我出去了。
function Test1Controller($scope) {
var serverData = ["Samsung Galaxy Note", "Samsung Galaxy S6", "Samsung Galaxy Avant","Samsung Galaxy Young"];
$scope.items= [] ;
//var selectedvalue = window.localStorage.getItem("selectedvalue");
// here selected value Samsung Galaxy S6
var selectedvalue="Samsung Galaxy S6";
for(var i=0;i<serverData.length;i++)
{
var modal = {
name:serverData[i],
selected:false
};
if (selectedvalue.indexOf(serverData[i]) >= 0 || null)
{
modal.selected = true;
}
$scope.items.push(modal);
}
//----------------------------Our Shop Offers----------------------------------------
$scope.offers = [
{
id: "as23456",
Store: "samsung",
Offer_message:"1500rs off",
modalname: "Samsung Galaxy Young"
},{
id: "de34575",
Store: "samsung",
Offer_message:"20% Flat on Samsung Galaxy S6",
modalname: "Samsung Galaxy S6"
},
]
//-----------------------------------------------------------------------------------
$scope.selection = [];
$scope.toggleSelection = function toggleSelection(item) {
$scope.gotOffers=[];
var idx = $scope.selection.indexOf(item);
// is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// is newly selected
else {
$scope.selection.push(item);
}
for(var i=0;i<$scope.selection.length;i++){
for(var j=0;j<$scope.offers.length;j++){
console.log($scope.selection[i].name +" "+ $scope.offers[j].modalname)
if( $scope.selection[i].name == $scope.offers[j].modalname){
var idx = $scope.gotOffers.indexOf($scope.offers[j].Offer_message);
if(idx == -1){
console.log("inside idx")
$scope.gotOffers.push($scope.offers[j]);
}
}
}
}
console.log($scope.offers);
};
//---------------------------------------------------------------------------------------
$scope.check = function()
{
var checkedItems = [];
console.log($scope.offerSelected)
for(var i=0;i<$scope.items.length;i++)
{
if($scope.items[i].selected){
checkedItems.push($scope.items[i].name);
}
}
console.log(checkedItems) ;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div ng-app>
<div ng-controller="Test1Controller" >
<div ng-repeat="item in items">
<input type="checkbox" ng-model="item.selected" ng-checked="selection.indexOf(item) > -1" ng-click="toggleSelection(item)"/> {{item.name}}
</div>
<select ng-show="gotOffers.length > 0" ng-model="offerSelected">
<option ng-repeat="offer in gotOffers" value="{{offer.id}}">{{offer.Offer_message}}</option>
</select>
<input type="button" name="submit" value="submit" ng-click="check()"/>
</div>
</div>
答案 0 :(得分:9)
通过解决几个问题,您的代码可以正常工作:
您在复选框输入中同时使用ng-model
和ng-selected
。根据{{3}},这些不应该一起使用,因为它们可能会导致意外行为。
您正在使用ng-click
更新可用的优惠。相反,您可以提供一个功能,根据选择的项目筛选商品列表。这意味着无论何时选择或取消选择项目,都会更新优惠列表。
我已经缩减了您的演示,并在下面包含了一个固定版本:
function Test1Controller($scope) {
$scope.items = [{"name": "Samsung Galaxy Note", "selected": false}, {"name": "Samsung Galaxy S6", "selected": true}, {"name": "Samsung Galaxy Avant", "selected": false}, {"name": "Samsung Galaxy Young","selected": false}];
$scope.offers = [{
id: "as23456",
Store: "samsung",
Offer_message: "1500rs off",
modalname: "Samsung Galaxy Young"
}, {
id: "de34575",
Store: "samsung",
Offer_message: "20% Flat on Samsung Galaxy S6",
modalname: "Samsung Galaxy S6"
}, ];
var selectedItems = function() {
return $scope.items.filter(function(item) {
return item.selected;
});
};
$scope.availableOffers = function() {
var items = selectedItems();
return $scope.offers.filter(function(offer) {
return items.some(function(item) {
return item.name === offer.modalname;
});
});
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div ng-app>
<div ng-controller="Test1Controller" >
<div ng-repeat="item in items">
<input type="checkbox" ng-model="item.selected" ng-click="toggleSelection(item)"/> {{item.name}}
</div>
<select ng-show="availableOffers().length > 0" ng-model="offerSelected">
<option ng-repeat="offer in availableOffers()" value="{{offer.id}}">{{offer.Offer_message}}</option>
</select>
<input type="button" name="submit" value="submit" ng-click="check()"/>
</div>
</div>
答案 1 :(得分:3)
您可以通过在select和使用predicate函数的过滤器上使用ng-options指令来实现此目的。
function(value,index):谓词函数可用于写入任意过滤器。为数组的每个元素调用该函数。最终结果是谓词返回true的那些元素的数组。
您可以查看工作示例here
HTML
<div ng-controller="OfferController">
<div ng-repeat="item in items">
<input type="checkbox" ng-model="item.selected" /> {{item.name}}
</div>
<select ng-show="hasResults" data-ng-options="offer.id as offer.Offer_message for offer in offers | filter : onGetFilter" ng-model="offerSelected"></select>
<input type="button" name="submit" value="submit" ng-click="check()" />
<br/>
<label>Selected Offer {{offerSelected}}</label>
</div>
javascript
myApp.controller('OfferController', ['$scope', function ($scope) {
var self = this;
var serverData = ["Samsung Galaxy Note", "Samsung Galaxy S6", "Samsung Galaxy Avant", "Samsung Galaxy Young"];
$scope.items = [];
var selectedvalue = "Samsung Galaxy S6";
for (var i = 0; i < serverData.length; i++) {
var modal = {
name: serverData[i],
selected: false
};
if (selectedvalue.indexOf(serverData[i]) >= 0 || null) {
modal.selected = true;
}
$scope.items.push(modal);
}
$scope.offers = [{
id: "as23456",
Store: "samsung",
Offer_message: "1500rs off",
modalname: "Samsung Galaxy Young"
}, {
id: "de34575",
Store: "samsung",
Offer_message: "20% Flat on Samsung Galaxy S6",
modalname: "Samsung Galaxy S6"
}];
$scope.hasResults = false;
$scope.onGetFilter = function (value, index) {
if (index == 0 && $scope.hasResults) {
$scope.hasResults = false;
}
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items[i].selected) {
if ($scope.items[i].name.indexOf(value.modalname) !== -1) {
$scope.hasResults = true;
return true;
}
}
}
return false;
};
function getSelectedItems() {
var selectedItems = [];
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items[i].selected) {
selectedItems.push($scope.items[i]);
}
}
return selectedItems;
}
}]);
答案 2 :(得分:0)
function Test1Controller($scope) {
var serverData =
[
"Samsung Galaxy Note",
"Samsung Galaxy S6",
"Samsung Galaxy Avant",
"Samsung Galaxy Young"
];
$scope.items = [];
//var selectedvalue = window.localStorage.getItem("selectedvalue");
// here selected value Samsung Galaxy S6
var selectedvalue = "Samsung Galaxy S6";
for (var i = 0; i < serverData.length; i++) {
var modal = {
name: serverData[i],
selected: selectedvalue.indexOf(serverData[i]) >= 0
};
$scope.items.push(modal);
}
//----------------------------Our Shop Offers----------------------------------------
$scope.offers = [{
id: "as23456",
Store: "samsung",
Offer_message: "1500rs off",
modalname: "Samsung Galaxy Young"
}, {
id: "de34575",
Store: "samsung",
Offer_message: "20% Flat on Samsung Galaxy S6",
modalname: "Samsung Galaxy S6"
}, ]
//-----------------------------------------------------------------------------------
$scope.selection = [];
$scope.toggleSelection = function toggleSelection(item) {
$scope.gotOffers = [];
var idx = $scope.selection.indexOf(item);
// is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// is newly selected
else {
$scope.selection.push(item);
}
for (var i = 0; i < $scope.selection.length; i++) {
for (var j = 0; j < $scope.offers.length; j++) {
console.log($scope.selection[i].name + " " + $scope.offers[j].modalname)
if ($scope.selection[i].name == $scope.offers[j].modalname) {
var idx = $scope.gotOffers.indexOf($scope.offers[j].Offer_message);
if (idx == -1) {
console.log("inside idx")
$scope.gotOffers.push($scope.offers[j]);
}
}
}
}
console.log($scope.offers);
};
//---------------------------------------------------------------------------------------
$scope.check = function()
{
var checkedItems = [];
console.log($scope.offerSelected)
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items[i].selected) {
checkedItems.push($scope.items[i].name);
}
}
console.log(checkedItems);
}
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-app>
<div ng-controller="Test1Controller">
<div ng-repeat="item in items">
<input type="checkbox" ng-model="item.selected" ng-checked="selection.indexOf(item) > -1" ng-click="toggleSelection(item)" /> {{item.name}}
</div>
<select ng-show="gotOffers.length > 0" ng-model="offerSelected">
<option value="">Select offer</option>
<option ng-repeat="offer in gotOffers" ng-value="offer.id">{{offer.Offer_message}}</option>
</select>
<input type="button" name="submit" value="submit" ng-click="check()" />
</div>
</div>
&#13;
根据我的理解你的问题,我已经完成了代码。
如果你要求其他东西,请回复我