Question

我是第一次使用angularjs开发移动应用程序。我使用下面的代码从json文件中获取数据，

<div ng-app="app" ng-controller="GetVideosFiles">

<ul ng-repeat=" x in GetData.videos ">
<li>example</li>
    <li><h1>{{ x.Title }}</h1></li>
    <li>{{x.Description}}</li><br><br>
    <li><a ng-href="{{ x.Url }}">Watch video</a></li>  
    <li><button ng-click="">Share</button></li>
</ul>


</div>

<script type="text/javascript">


var app=angular.module("app",[]);
app.controller("GetVideosFiles",GetVideosFiles);
function GetVideosFiles($scope,$http){

     $scope.GetData = [];
    $http.get("VideoFile.json")
    .success(function(rsp){
        //alert(rsp);

        $scope.GetData = rsp;
        });
        }

</script>

VideoFile.json：

{ 
    "videos": [{ 
        "Title": "Windmill", 
        "Description": "What are wind mills? Are they giant fans? How do they work?", 
        "Url": "https://www.youtube.com/watch?v=Zrp0RC3XTpw" 
    }, { 
        "Title": "Race Car", 
        "Description": "Yeah, we know that your kid loves his cars", 
        "Url": "https://www.youtube.com/watch?v=zAteCGxrCSo" 
    }, { 
        "Title": "Blow Painting", 
        "Description": "The gentle wind has many an artist", 
        "Url": "https://www.youtube.com/watch?v=LKs3nw7YcR8" 
    }, , { 
        "Title": "Dreamcatcher", 
        "Description": "The wind turned naughty and blown the pieces of Dream catcher all over 
the hose", 
        "Url": "https://www.youtube.com/watch?v=UbgZuDAmAM" 
    }] 
}

当我点击应显示可用社交媒体分享特定视频的分享按钮时。

我是angularjs的新手所以请有人指导我如何实现这个目标吗？

示例代码会很明显。

Answer 1

此ng-click将切换showShare：

的值

<li><button ng-click="showShare=!showShare">Share</button></li>

然后使用<span>添加ng-show或其他元素，如：

<span ng-show="showShare">
     <a>Some share link</a>
</span>

此范围仅在showShare为true时显示。（<span>进入上面显示的<li>内部或之后

Angularjs - 如何将视频分享到可用的社交媒体

1 个答案: