Having trouble using angular.isString in conjunction with ng-repeat

Question

Having trouble using angular.isString in conjunction with ng-repeat

Is there a way to use angular.isString for comparison within an ng-if in an ng-repeat loop? Currently, all items in the array are being returned.

I attempted to simply display the result of angular.isString, but no output is generated.

This is my desired functionality:

<li ng-repeat="item in data">
  <div ng-if="angular.isString(item)">
    {{ item }}
  </div>
</li>

function MyCtrl($scope)
{
    $scope.data =
    [
        "Hello",
        "-",
        123
    ];
}

View the fiddle here: http://jsfiddle.net/m6k13whh/2/

javascript angularjs

Answer 1

Answer №1

In Angular, expressions are evaluated based on the scope. One way to work with this is by creating a custom function that utilizes angular.isString:

<li ng-repeat="item in data">
  <div ng-if="isString(item)">
    {{ item }}
  </div>
</li>

$scope.isString = function(item) {
    return angular.isString(item);
}

Another option is to filter all items using the custom function:

<li ng-repeat="item in data | filter:isString">        
   <div>
       {{ item }}     
   </div>
</li>

Answer 2

In Angular, expressions are evaluated based on the scope. One way to work with this is by creating a custom function that utilizes angular.isString:

<li ng-repeat="item in data">
  <div ng-if="isString(item)">
    {{ item }}
  </div>
</li>

$scope.isString = function(item) {
    return angular.isString(item);
}

Another option is to filter all items using the custom function:

<li ng-repeat="item in data | filter:isString">        
   <div>
       {{ item }}     
   </div>
</li>

Answer 3

Answer №2

A helpful approach is to pass a reference to an Angular method into the scope

$scope.checkString = angular.isString

Then, in the template, you can simply use ng-if="checkString(item)"

http://example.com

Answer 4

A helpful approach is to pass a reference to an Angular method into the scope

$scope.checkString = angular.isString

Then, in the template, you can simply use ng-if="checkString(item)"

http://example.com

Answer 5

Answer №3

Hello there,

Ensure that you are only importing one library into your code. It appears that in the fiddle, you have included two angular scripts. Please remove the duplicate from External Resources!

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

<!-- My desired comparison -->
     <ul>
         <li data-ng-repeat="item in data">
             <div data-ng-if="isString(item)">
                {{ item }}
             </div>
         </li>
     </ul>
 </div>

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

 myApp.controller('MyCtrl', function($scope) {
     $scope.data = [
         "Hello",
         "-",
         123
     ];

     $scope.isString = function(value) {
          return angular.isString(value);
     };
});

Answer 6

Hello there,

Ensure that you are only importing one library into your code. It appears that in the fiddle, you have included two angular scripts. Please remove the duplicate from External Resources!

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

<!-- My desired comparison -->
     <ul>
         <li data-ng-repeat="item in data">
             <div data-ng-if="isString(item)">
                {{ item }}
             </div>
         </li>
     </ul>
 </div>

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

 myApp.controller('MyCtrl', function($scope) {
     $scope.data = [
         "Hello",
         "-",
         123
     ];

     $scope.isString = function(value) {
          return angular.isString(value);
     };
});

Having trouble using angular.isString in conjunction with ng-repeat

Answer №1

Answer №2

Answer №3

Similar questions

Enhance the "text" attribute of IXMLDOMElement to enable functionality in Chrome

Retrieve the current element's 'this' object even after binding an external 'this' object

Update the Vue component upon fetching new data

Looking for a new slider option to replace the traditional Conveyor belt slideshow?

Deactivate certain days in Material UI calendar component within a React application

Using Angular's filter pipe to search within a nested array

Troubleshooting npm installation issues with Angular 2 Quickstart guide (URL: https://angular.io/docs/js/latest/quickstart.html)

What is the process for sending a REST request in my specific situation?

Comparison between JavaScript Promise .then(onFulfilled, onRejected) and .then(onFulfilled).catch(errorFunc) in handling asynchronous operations

Transfer information from the client to the server using AJAX and PHP by

AngularJS Datepicker - calendar dropdown does not update when the model changes

What are the recommended margins for various alphabets?

JavaScript conditional statement malfunctioning

Analyzing the value of a tab with Protractor测试

Is the 404 error a result of the ajax code?

Utilizing jQuery DataTable with an AJAX call to retrieve data from a JSON

Unable to activate Knockout data-bind using jQuery

Is there a way to track when the Angular DTOptionsBuilder ajax call is complete and trigger a callback function?

Tokenizer method utilizing strings

Ways to specify a setter for a current object property in JavaScript