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

时间:2014-09-19 17:00:31

标签: javascript angularjs

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

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

    $scope.shows = data; 

    var temp = data[0];

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

});

将其传递给AngularJS视图,该视图使用单选按钮显示它们。

<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>

我现在需要的是将节目名称作为值传递给无线电输入。这甚至可能吗?

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

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

1 个答案:

答案 0 :(得分:1)

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

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

Live Demo

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

最后,你应该始终遵循&#34; dot&#34;规则,以便子范围更改影响父范围。

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

在控制器中:

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

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