CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
oded
oded

Reputation: 179

How to show element when value in input doesn't found in a list in AngularJS?

I created search input to search some items inside a list. I want that if the item search isn't inside the list to show add button like in the html code:

<div ng-controller="foodCtrl">
    <form>
        <div class="form-group row foodGroupp" >
            <label for="inputFood" class="col-sm-2 col-form-label">food</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputFood" ng-model="inputFood" placeholder="Write some food"  ng-keyup="doCheck()">
            </div>
            <span id="addIcon" ng-show="showIcon">
                <button class="btn btn-default">+</button>
            </span>
            <ul ng-show="inputFood" id="foodList">
                <li ng-repeat="foodN in foodName | filter : inputFood">
                        <span>{{ foodN.name}}</span>
                </li>
            </ul>
        </div>


        <div class="form-group row">
            <div class="offset-sm-2 col-sm-10">
                <button type="submit" class="btn btn-primary">הוסף</button>
            </div>
        </div>
    </form>
 </div>

The javascript code look like this:

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

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

    $scope.foods = [];
    $scope.foodName = [];

    $http.get('/files/foodName.json')
    .success(function(response){
        $scope.foodName = response;
    });

    $scope.showIcon = false;

    $scope.doCheck = function(){
        $(function () {
            if($scope.inputFood != ""){
                var sizeOfList = $("#foodList").find("li").length;

                if(sizeOfList == 0){
                    console.log("sizeOfList " +sizeOfList);
                    $scope.showIcon = true;
                }

            }else{
                $scope.showIcon = false;
            }
        });
    }
});

It doesn't work correctly. If the length of the value is one or the list is shown it still show me the icon.

Upvotes: 0

Views: 77

Answers (2)

user7665100
user7665100

Reputation:

It works fine here at the code snippet.Nothing changed.

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

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

  $scope.foods = [];
  $scope.foodName = [];

  //$http.get('/files/foodName.json')
  //  .success(function(response) {
  //    $scope.foodName = response;
  //  });

  $scope.foodName = [{
    name: 'test1'
  }, {
    name: 'test2'
  }, {
    name: 'test3'
  }];
  $scope.showIcon = false;

  $scope.doCheck = function() {
    if ($scope.inputFood != "") {
      var sizeOfList = $("#foodList").find("li").length;

      if (sizeOfList == 0) {
        console.log("sizeOfList " + sizeOfList);
        $scope.showIcon = true;
      }

    } else {
      $scope.showIcon = false;
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp">
  <div ng-controller="foodCtrl">
    <form>
      <div class="form-group row foodGroupp">
        <label for="inputFood" class="col-sm-2 col-form-label">food</label>
        <div class="col-sm-10">
          <input type="atext" class="form-control" id="inputFood" ng-model="inputFood" placeholder="Write some food" ng-keyup="doCheck()">
        </div>
        <span id="addIcon" ng-show="showIcon">
                <button class="btn btn-default">+</button>
            </span>
        <ul ng-show="inputFood" id="foodList">
          <li ng-repeat="foodN in foodName | filter : inputFood">
            <span>{{ foodN.name}}</span>
          </li>
        </ul>
      </div>
      <div class="form-group row">
        <div class="offset-sm-2 col-sm-10">
          <button type="submit" class="btn btn-primary">הוסף</button>
        </div>
      </div>
    </form>
  </div>
</div>

Upvotes: 0

Manoj Patidar
Manoj Patidar

Reputation: 1171

You can direct show your button according to your filter data.

HTML CODE

<div ng-controller="foodCtrl">
    <form>
        <div class="form-group row foodGroupp" >
            <label for="inputFood" class="col-sm-2 col-form-label">food</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputFood" ng-model="inputFood" placeholder="Write some food"  ng-keyup="doCheck()">
            </div>
            <span id="addIcon" ng-hide="(foodName|filter:inputFood).length > 0">
                <button class="btn btn-default">+</button>
            </span>
            <ul ng-show="inputFood" id="foodList">
                <li ng-repeat="foodN in foodName | filter : inputFood">
                        <span>{{ foodN.name}}</span>
                </li>
            </ul>
        </div>


        <div class="form-group row">
            <div class="offset-sm-2 col-sm-10">
                <button type="submit" class="btn btn-primary">הוסף</button>
            </div>
        </div>
    </form>
 </div>

Upvotes: 1

Related Questions