个人中心
gpt4 book ai didi

javascript - Angular - 更新 $scope 后无法正确加载 div

转载 作者：行者123 更新时间：2023-12-03 03:41:56 27 4
gpt4 key购买 nike

这里我正在创建一个可搜索的下拉列表。当您搜索并选择时我们需要显示所选内容。当我选择一个复选框时，它会在下一个事件后显示。这是我的示例代码。 (问题是显示所选内容)

<!DOCTYPE html>

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <body>

    <div ng-app="myApp" ng-controller="myCtrl">

        <input style="float:left" type="text" name="input" placeholder="Search for IP.." value="" ng-keyup="filter()" ng-model="textInput">


        <br>
        <div ng-repeat="option in filteredArray">
            <label><input class="Checkbox" type="checkbox" value={{option}} name="filtered" ng-model="event" ng-click="eventListen()">{{option}}<br></label>
        </div>
        <div ng-repeat="option in favorite" ng-show="afterSelected">
            <input type="button" value={{option}}> 
        </div>
    </div>

    <script>
        var app = angular.module("myApp", []);

        app.controller("myCtrl", function ($scope) {
            $scope.Options = ["Apple","Banana","Orange","Jackfruit","Pineapple"]
            $scope.afterSelected = false;

            $scope.filter = function () {
                $scope.filteredArray = [];
                for (var i = 0; i < $scope.Options.length; i++) {
                    if($scope.Options[i].indexOf($scope.textInput) !== -1) {
                        $scope.filteredArray.push($scope.Options[i]);
                    }
                }
            }
            $scope.eventListen = function () {
                $(document).ready(function(){
                    $scope.afterSelected = true;
                    $scope.favorite = [];
                    var string = "";
                    $("input[name='filtered']:checked").each(function(){            
                        $scope.favorite.push($(this).val());
                    });
                });
            }
        })
    </script>
    </body>
</html>

最佳答案

你可以像这样不使用 jQuery 来完成它......

首先，排列数组:

$scope.Options = [{"name":"Apple","status":false},{"name":"Banana","status":false}];

使用angular#forEach过滤数组:

angular.forEach($scope.Options,function(data){
  if(data.name.indexOf($scope.textInput) !== -1) {
    $scope.filteredArray.push(data);
  }
});

然后，显示过滤后的数组:

<div ng-repeat="option in filteredArray">
   <input type="checkbox"  id="optionId" name="filtered" ng-model="option.status"  ng-change="eventListen(option)">
   <label for="optionId">{{option.name}}</label>
</div>

ng-change的eventListen:

$scope.eventListen = function (option) {
   $scope.favorite = [];
   $scope.afterSelected = true;

   angular.forEach($scope.Options,function(data){
      if(data.status == true) {
         $scope.favorite.push(data);
      }
   });
}

最后，遍历收藏夹列表:

<div ng-repeat="option in favorite track by $index" ng-show="afterSelected">
   <input type="button" ng-value="option.name"> 
</div>
<小时/> 

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
  $scope.Options = [{
    "name": "Apple",
    "status": false
  }, {
    "name": "Banana",
    "status": false
  }, {
    "name": "Orange",
    "status": false
  }, {
    "name": "Jackfruit",
    "status": false
  }, {
    "name": "Pineapple",
    "status": false
  }];
  $scope.afterSelected = false;
  $scope.filter = function() {
    $scope.filteredArray = [];

    angular.forEach($scope.Options, function(data) {
      if (data.name.indexOf($scope.textInput) !== -1) {
        $scope.filteredArray.push(data);
      }
    });

  }
  $scope.eventListen = function(option) {
    $scope.favorite = [];
    $scope.afterSelected = true;

    angular.forEach($scope.Options, function(data) {
      if (data.status == true) {
        $scope.favorite.push(data);
      }
    });
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

  <input style="float:left" type="text" name="input" placeholder="Search for IP.." value="" ng-keyup="filter()" ng-model="textInput">


  <br><br>
  <div ng-repeat="option in filteredArray">
    <input type="checkbox" id="optionId" name="filtered" ng-model="option.status" ng-change="eventListen(option)">
    <label for="optionId">{{option.name}}</label>
  </div>
  <div ng-repeat="option in favorite track by $index" ng-show="afterSelected">
    <input type="button" ng-value="option.name">
  </div>
</div>

关于javascript - Angular - 更新 $scope 后无法正确加载 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45575096/

27 4 0
文章推荐： javascript - Html.TextBoxFor - 如何关闭历史记录
文章推荐： charts - _ScaffoldLayout 自定义多子布局委托(delegate)忘记布局以下子级
文章推荐： dart - 如何使用Dart抓取带有登录页面的网站？
文章推荐： javascript - 检索从 gmail 下载的文件形式附件的内容，因为它存储在 gmail 服务器中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com