Question

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

<!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>

Answer 1

你可以在没有这样的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>

<{1}}的

eventListen ：

ng-change

最后，遍历最喜欢的列表：

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

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

1 个答案: