Use $ index without a ng-repeat?

Question

Use $ index without a ng-repeat?

Navigation

#1 by (0 votes)

0

I'm trying to upload some videos to a site and it happens to me that if I load one works perfect, but if they are more, you can not play any. I suspect that what happens is that I have the same ng-click to play all the videos, then they must be treading ... Is there a way to use a $ index speci without ng-repeat or generate that number dynamically to pass it from parameter? this is my code Thanks!

html
    <div id="video-section" class="wide-rail-item player-section-video" ng-if="ready">
        <div>
            <player content="content"></player>
        </div>
    </div>


directive.js

            $scope.click = function(){

                var showPlayer = function() {
                    angular.element("#image-section").remove();
                    $scope.ready = true;
                };
    }

javascript angularjs

asked by Pil 07.11.2018 в 04:02

source

1 answer

I want to extract the autoincrementable id when inserting the record configure tomEE with Docker

score 0 · Answer 1

If you are getting a list of videos from an API service, the ideal is to use a ng-repeat to display them on your website. You can use a ng-click with a function that receives as a parameter the movie as such and then in your controller makes use of the url of the movie. Look at this example:

<!doctype html >
<html lang="en" ng-app="app">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, world!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="MainController as main">

    <div >
       <ul>
           <li ng-repeat="movie in main.movies">
               <a href="" ng-click="main.goToMovie(movie);">{{movie.name}}</a>
           </li>
       </ul>
    </div>

    <div>
        <h1>Movie: {{main.movieSelected.name}}</h1>
        <p>Url: {{main.movieSelected.link}}</p>
    </div>
    <script>
        angular
            .module('app', [])
            .controller('MainController', function () {
                var main = this;
                main.movieSelected = null;
                main.movies = [
                    { name: 'movie 1', link: 'http://hosting/movie1'},
                    { name: 'movie 2', link: 'http://hosting/movie2'},
                    { name: 'movie 3', link: 'http://hosting/movie3'},
                    { name: 'movie 4', link: 'http://hosting/movie4'}
                ];

                main.goToMovie = function (movie) {
                    main.movieSelected = movie;
                }
            });
    </script>
</body>
</html>