脚本宝典收集整理的这篇文章主要介绍了

angular.js ng-options的正确打开姿势

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>直接上代码</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div class=&quot;control-group&quot;> <label class=&quot;control-label&quot;>商品:</label></p> <div class=&quot;controls&quot; ng-controller=&quot;goodsCtrl&quot;> <select ng-model=&quot;selectGoods&quot; ng-options=&quot;g.name for g in goods track by g.id&quot; name=&quot;goods_id&quot;></select> </div> </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"control-group"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"control-label"</span>&gt;</span>商品:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"controls"</span> <span class="hljs-attr">ng-controller</span>=<span class="hljs-string">"goodsCtrl"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">ng-model</span>=<span class="hljs-string">"selectGoods"</span> <span class="hljs-attr">ng-options</span>=<span class="hljs-string">"g.name for g in goods track by g.id"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"goods_id"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <p>其中 track by 后面的为option的value值, g.name用于显示选项名称。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script type=&quot;text/javascript&quot;></p> <p> var app = angular.module('myApp', []);</p> <p> app.controller('goodsCtrl', function($scope, $http) { $http({ method: 'GET', url: &quot;{:U('orders/get_goods_list')}&quot; }).then(function successCallback(response) { $scope.goods = response.data; // console.log(response.data); }, function errorCallback(response) { // 请求失败执行代码 });</p> <p> });</p> <p></script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs php"><code>&lt;script type=<span class="hljs-string">"text/javascript"</span>&gt; <span class="hljs-keyword">var</span> app = angular.module(<span class="hljs-string">'myApp'</span>, []); app.controller(<span class="hljs-string">'goodsCtrl'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($scope, $http)</span> </span>{ $http({ method: <span class="hljs-string">'GET'</span>, url: <span class="hljs-string">"{:U('orders/get_goods_list')}"</span> }).then(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">successCallback</span><span class="hljs-params">(response)</span> </span>{ $scope.goods = response.data; <span class="hljs-comment">// console.log(response.data);</span> }, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">errorCallback</span><span class="hljs-params">(response)</span> </span>{ <span class="hljs-comment">// 请求失败执行代码</span> }); }); &lt;/script&gt; </code></pre> <p><span class="img-wrap"><img data-src="/img/bV1kyk?w=565&amp;h=176" src="https://cdn.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

angular.js ng-options的正确打开姿势

全部内容,希望文章能够帮你解决

angular.js ng-options的正确打开姿势

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过