javascript - AngularJS 中未知数量输入的设置值

Question

我有一个专门用于电视节目的网络应用程序。 Controller 获取已注册的电视节目:

$http.get('/shows').success(function(data) {

    $scope.shows = data; 

    var temp = data[0];

    $scope.radio-input-shows = temp['name'];

});

这被传递到 AngularJS View ，该 View 用单选按钮显示它们。

<div class="col-use-list sidebar">

    <div class="col-md-12 sidebar-element sidebar-triangle" ng-repeat="show in shows" style="margin-bottom: 10px;">

        <div class="col-use-icon" style="padding-left: 0px;">

            <img alt="{{ show.name }}" src="img/artwork/{{ show.image_name }}.png" style="width:60px;height:60px;">

        </div>

        <div class="col-use-name">

            <p>{{ show.name }}</p>

        </div>

        <div class="col-use-select">

            <input type="radio" name="sidebar-radio" ng-model="radio-input-shows" value="{{ show.image_name }}">

        </div>

    </div>

    <tt>Show = {{radio-input-shows | json}}</tt><br/>

</div>

我现在需要的是将节目名称作为值传递给 radio 输入。这可能吗？

==================

所以我现在将输入更改为 <input type="radio" name="checkbox" ng-model="tvshow" ng-value="show.name"> 。并改变了这个<tt>Show = {{tvshow}}</tt><br/> 。但是，如果我单击另一个单选按钮，它仍然不会更新......`

Answer 1

当然!您只需使用 ng-value 根据 Angular 表达式设置值，并使用 $scope 属性即可。

<input type="radio" ng-model="whatever" ng-value="show.name">

Live Demo

您还使用了无效的属性名称。 radio-input-shows 不是有效的 JavaScript，并且抛出错误。这应该是驼峰式 radioInputShows 或至少不是语法错误。

最后，您应该始终遵循“点”规则，以便子范围更改影响父范围。

<input type="radio" ng-model="foo.radioInputShows" ng-value="show.image_name">
<tt>Show = {{foo.radioInputShows | json}}</tt><br/>

在 Controller 中:

$scope.foo = {
  // default value
  radioInputShows: '123'
};

这只是利用对象引用来共享更改。